/* ==========================================================================
   apps.css — styles that belong to individual applications.
   ========================================================================== */

/* ----------------------------------------------------------------- Projects */
.splash { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.splash-ico {
  flex: 0 0 62px; height: 62px;
  display: grid; place-items: center;
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
}
.splash h2 { margin-bottom: 3px; }

/* ----------------------------------------------------------------- Terminal */
.term {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;
  background: #07080a;
  padding: 9px 11px 12px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  color: #d7d2c6;
  scrollbar-width: thin; scrollbar-color: #333 #111;
}
.term > * { direction: ltr; }
.term::-webkit-scrollbar { width: 13px; }
.term::-webkit-scrollbar-track { background: #101214; }
.term::-webkit-scrollbar-thumb { background: #2c3034; border: 1px solid #43484d; }
.term-out { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term-out .dim { color: #7d8790; }
.term-out .amber { color: var(--amber); }
.term-line { display: flex; align-items: baseline; }
.term-prompt { color: var(--teal); white-space: pre; }
.term-in {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-family: var(--mono); font-size: 12.5px;
  color: #f2eee4; caret-color: var(--amber);
  padding: 0;
}

/* -------------------------------------------------------------------- ELIZA */
.eliza-log {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;
  background: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  padding: 10px 12px;
  scrollbar-width: thin;
}
.eliza-log > * { direction: ltr; }
.eliza-log .line { margin: 0 0 7px; line-height: 1.5; font-size: 12.5px; }
.eliza-log .line.you b { color: #444; }
.eliza-log .line.them b { color: #0d2f8f; }
.seams {
  flex: 0 0 auto; max-height: 44%;
  overflow: auto; direction: rtl;
  background: var(--gray);
  border-top: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 var(--hi);
}
.seams > * { direction: ltr; }
.seams .pad { padding: 8px 12px 12px; }
.seams h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
            margin: 0 0 6px; color: var(--lo); }

/* --------------------------------------------------------------------- NAVI
   the only window on this machine that is not gray                          */
.win-body.navi { background: #08090b; }
.navi-pad { flex: 1 1 auto; overflow: auto; direction: rtl; padding: 0; scrollbar-width: thin; }
.navi-pad > * { direction: ltr; }
.win-body.navi .navi-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  color: var(--amber);
  border-bottom: 1px solid rgba(255,155,63,.3);
  background: linear-gradient(180deg, rgba(255,155,63,.10), transparent);
}
.win-body.navi .dim { color: #6a7078; letter-spacing: .12em; }
.win-body.navi .amber { color: var(--amber); letter-spacing: .12em; }
.win-body.navi .navi-body {
  margin: 0; padding: 18px 20px 22px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  color: var(--bone); white-space: pre-wrap;
  min-height: 60%;
  text-shadow: 0 0 12px rgba(232,228,218,.16);
}
.win-body.navi .navi-foot {
  display: flex; justify-content: space-between;
  padding: 9px 14px 14px;
  font-family: var(--mono); font-size: 11px;
  border-top: 1px solid rgba(255,155,63,.18);
}
.win-body.navi h1 { color: var(--bone); font-family: var(--mono); font-size: 18px;
                    letter-spacing: .1em; margin: 18px 20px 2px; }
.win-body.navi .sub { color: var(--amber-dim); font-family: var(--mono); font-size: 11px;
                      letter-spacing: .18em; margin: 0 20px 14px; }
.win-body.navi pre { color: #b9b4a8; font-family: var(--mono); font-size: 12px;
                     line-height: 1.7; white-space: pre-wrap; margin: 0; padding: 0 20px 22px; }

/* ------------------------------------------------------------------ Debrief */
table.log { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 11.5px; }
table.log td {
  border-top: 1px solid #d8d8d8;
  padding: 3px 6px 3px 0;
  vertical-align: top;
  font-family: var(--mono);
  word-break: break-word;
}
table.log td.t { width: 46px; color: #666; }
table.log td.k { width: 128px; color: #0d2f8f; }
.doc .btn { margin-right: 4px; text-decoration: none; display: inline-block; }


/* images in the inspector — the reaction folder, screenshots */
.inspector img.shot {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi), 3px 4px 0 rgba(0,0,0,.25);
  background: var(--paper);
}
.splash-ico img { image-rendering: auto; }


/* a text file in the inspector reads as a text file: monospace, but with a
   line length a person can follow */
.inspector pre.file {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin: 0;
  max-width: 64ch;
}


/* a binary has no preview. that is the whole preview. */
.nopreview {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 4px; padding: 26px 12px;
  background: var(--gray-dk); color: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  font-size: 12px; text-transform: lowercase; letter-spacing: .04em;
}
.nopreview .meta { color: rgba(255,255,255,.65); font-family: var(--mono); font-size: 11px; }

/* provenance — the graph under the file */
.prov { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi); }
.prov h3 { margin-top: 0; }
.prov-list dt { color: #3b4a6b; font-size: 10.5px; }
.prov-list dd a { color: #0d2f8f; text-decoration: none; border-bottom: 1px dotted currentColor; }