/* tapes.motor.dev — terminal chrome. Data, not design. */

:root {
  --bg: #0a0c0a;
  --bg-raise: #111411;
  --fg: #c9d1c9;
  --dim: #6a746a;
  --border: #2a2f2a;
  --green: #5af78e;
  --cyan: #57c7ff;
  --red: #ff5c57;
  --amber: #f3f99d;
  --sel-bg: #223322;
}

* { box-sizing: border-box; }

/* The hidden attribute must beat #view-tree's display:flex. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

main { padding: 12px 16px; }

.dim { color: var(--dim); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── tables (app catalog, tape list) ─────────────────────────────────── */

table { border-collapse: collapse; width: 100%; }
th, td { padding: 3px 14px 3px 0; text-align: left; white-space: nowrap; }
th { color: var(--dim); font-weight: normal; border-bottom: 1px solid var(--border); }
th.num, td.num { text-align: right; }
tr.link-row:hover { background: var(--bg-raise); cursor: pointer; }

.kind { color: var(--fg); }
.kind.http { color: var(--cyan); }
.kind.pass { color: var(--green); }
.kind.fail { color: var(--red); }
.kind.run { color: var(--dim); }

/* ── viewer ──────────────────────────────────────────────────────────── */

.tape-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.mode-toggle { margin-left: auto; }
button.mode {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  font: inherit;
  padding: 1px 10px;
  cursor: pointer;
}
button.mode.on { color: var(--bg); background: var(--green); border-color: var(--green); }

#view-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 130px);
}

.pane {
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pane.focused { border-color: var(--green); }
.pane-title { color: var(--dim); padding: 2px 8px; }
.pane-body { overflow: auto; padding: 2px 0 6px; flex: 1; }

#pane-tree { flex: 4; }
#pane-source { flex: 3; }
#pane-values { flex: 3; }
#view-raw .pane { height: calc(100vh - 130px); }

/* rows shared by the tree and values panes */
.row { padding: 0 8px; white-space: pre; cursor: pointer; }
.row:hover { background: var(--bg-raise); }
.row.sel { background: var(--sel-bg); }
.pane.focused .row.sel { outline: 1px solid var(--green); outline-offset: -1px; }
.row .arrow { color: var(--dim); display: inline-block; width: 2ch; }
.row .fn { color: var(--cyan); }
.row .key { color: var(--amber); }
.row .ret { color: var(--green); }
.row .escaped { color: var(--red); }

/* source pane */
.src-line { white-space: pre; padding: 0 8px; }
.src-line .lno { color: var(--dim); display: inline-block; width: 5ch; text-align: right; margin-right: 2ch; }
.src-line.hit { background: var(--sel-bg); }
.src-line.hit .lno { color: var(--amber); }
.src-file { color: var(--dim); padding: 0 8px 2px; }

/* raw entries */
.raw-table td, .raw-table th { padding: 1px 14px 1px 8px; }
.raw-table td.fqn { color: var(--cyan); }
.raw-table td.args { white-space: pre-wrap; }
.raw-table td.ret { color: var(--green); white-space: pre-wrap; }

.keys { margin-top: 8px; }
.loading { color: var(--dim); padding: 2px 8px; }
.error { color: var(--red); padding: 2px 8px; }