/* Truckfish — the in-browser taster shell.
   Styled as a period desk: ledger paper on the left, the theatre in the middle,
   the consignment slip on the right. */

.tst {
  --tst-paper: #E8E0CE;
  --tst-ink:   #23201A;
  font-family: var(--body);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink-800);
  min-height: 460px;
}
@media (min-width: 860px) {
  /* Side columns are content-sized so the theatre gets everything left over —
     the map is the thing that has to stay legible. */
  .tst { grid-template-columns: 196px minmax(0, 1fr) 248px; }
}

.tst-col { padding: .9rem; display: flex; flex-direction: column; min-width: 0; }
.tst-col + .tst-col { border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .tst-col + .tst-col { border-top: 0; border-left: 1px solid var(--line); }
}

.tst-h {
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mut);
  margin-bottom: .7rem; display: flex; align-items: center; gap: .4rem;
}
.tst-h .n {
  margin-left: auto; background: var(--ink-600); color: var(--teal);
  border-radius: 100px; padding: .05rem .42rem; font-size: .62rem;
}

/* ---- dispatches (inbox) ---- */
.tst-disp {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--ink-700); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-500);
  border-radius: 7px; padding: .6rem .7rem; margin-bottom: .5rem;
  color: var(--text); transition: border-color .15s ease, background .15s ease;
  font-family: inherit;
}
.tst-disp:hover { background: var(--ink-600); }
.tst-disp[aria-pressed="true"] { border-color: var(--teal); border-left-color: var(--teal); background: var(--ink-600); }
.tst-disp[data-done="1"] { opacity: .42; cursor: default; }
.tst-disp[data-done="1"]:hover { background: var(--ink-700); }
.tst-disp .who { font-family: var(--display); font-weight: 700; font-size: .88rem; line-height: 1.2; }
.tst-disp .ask { font-size: .76rem; color: var(--text-dim); margin-top: .18rem; }
.tst-disp .due { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; margin-top: .35rem; color: var(--text-mut); text-transform: uppercase; }
.tst-disp[data-urg="hot"] { border-left-color: var(--red); }
.tst-disp[data-urg="hot"] .due { color: var(--red); }

/* ---- theatre map ---- */
/* The board is authored portrait to match this column, so letting it fill the
   height is what makes it legible rather than what shrinks it. */
.tst-map { flex: none; width: 100%; aspect-ratio: 260 / 400; max-height: 430px; margin-inline: auto; border-radius: 8px; background: #0A1017; border: 1px solid var(--line); overflow: hidden; position: relative; }
.tst-map svg { width: 100%; height: 100%; display: block; }
.tst-node-lbl { font-family: var(--mono); font-size: 9.5px; fill: #9FB0C4; letter-spacing: .06em; text-transform: uppercase; }
.tst-node-lbl.hi { fill: var(--teal); }

.tst-clock {
  display: flex; align-items: center; gap: .5rem; margin-top: .6rem;
  font-family: var(--mono); font-size: .68rem; color: var(--text-mut);
  letter-spacing: .05em; white-space: nowrap; min-width: 0;
}
.tst-clock .date { color: var(--text); font-weight: 700; letter-spacing: .03em; }
.tst-clock .cap { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.tst-bar { height: 5px; border-radius: 3px; background: var(--ink-600); width: 64px; flex: none; overflow: hidden; }
.tst-bar i { display: block; height: 100%; background: var(--teal); transition: width .4s ease, background .3s ease; }
.tst-bar i.over { background: var(--red); }

/* ---- consignment slip ---- */
.tst-slip { background: var(--ink-700); border: 1px solid var(--line); border-radius: 8px; padding: .75rem; }
.tst-fld { margin-bottom: .6rem; }
.tst-fld label { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mut); margin-bottom: .25rem; }
.tst-fld select, .tst-fld input[type="range"] { width: 100%; }
.tst-fld select {
  background: var(--ink-900); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: .38rem .5rem; font-family: var(--body); font-size: .82rem;
}
.tst-qty { display: flex; align-items: baseline; gap: .4rem; }
.tst-qty b { font-family: var(--display); font-size: 1.05rem; color: var(--text); }
.tst-qty span { font-family: var(--mono); font-size: .66rem; color: var(--text-mut); }
input[type="range"] { accent-color: var(--teal); }

/* ---- forecast ---- */
.tst-fc { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .7rem; }
.tst-row { display: flex; gap: .5rem; font-size: .76rem; margin-bottom: .3rem; align-items: baseline; }
.tst-row .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mut); flex: none; width: 66px; }
.tst-row .v { color: var(--text-dim); }
.tst-row .v.good { color: var(--green); }
.tst-row .v.warn { color: var(--amber); }
.tst-row .v.bad  { color: var(--red); }

.tst-displace {
  margin-top: .6rem; border-radius: 7px; padding: .55rem .65rem;
  background: rgba(255,95,86,.09); border: 1px solid rgba(255,95,86,.32);
  font-size: .76rem; color: #FFC9C5; line-height: 1.45;
}
.tst-displace b { color: #FF8B84; }
.tst-displace.ok { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); color: #BFF0D0; }
.tst-displace.ok b { color: var(--green); }

.tst-commit { width: 100%; margin-top: .7rem; }
.tst-commit[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* ---- outcome log ---- */
.tst-log { margin-top: .7rem; font-size: .74rem; max-height: 118px; overflow-y: auto; }
.tst-log li { list-style: none; padding: .38rem .5rem; border-left: 2px solid var(--teal-dim); background: var(--ink-800); border-radius: 0 5px 5px 0; margin-bottom: .3rem; color: var(--text-dim); }
.tst-log li b { color: var(--text); font-weight: 600; }
.tst-log li.bad { border-left-color: var(--red); }
.tst-log ul { padding: 0; margin: 0; }

/* ---- the wall (purchase moment) ---- */
.tst-wall {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.75rem 1.5rem;
  background: linear-gradient(to bottom, rgba(6,8,12,.93), rgba(6,8,12,.985));
  backdrop-filter: blur(3px);
  animation: wallIn .45s ease both;
}
@keyframes wallIn { from { opacity: 0; } to { opacity: 1; } }
.tst-wall h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .6rem; max-width: 22ch; }
.tst-wall p { color: var(--text-dim); font-size: .92rem; max-width: 44ch; margin-bottom: 1.1rem; }
.tst-wall .tst-wall-cta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.tst-wall small { display: block; margin-top: .9rem; color: var(--text-mut); font-size: .76rem; }

.tst-shell { position: relative; }