/* thrust-console.css — THRUST.cockpit's control.panel and input.field (v1.9.3), after browseML's. (c) 2026 BANKON — Apache-2.0
   The field sits inside .dvc (the cockpit's palette); the control.panel is a drawer on the body, so it carries the same
   palette itself. Depth: 225 (between the cockpit's full display, 220, and the warp, 240). */
.tcp, .dvc .tcf {
  --tc-black: #05070A; --tc-panel: #0A0E14; --tc-line: #1B2430; --tc-white: #E8EEF2; --tc-dim: #7A8A99;
  --tc-plasma: #3FA9F5; --tc-ignition: #FF7A18; --tc-go: #36D399; --tc-danger: #FF3B30; --tc-gold: #d4af37;
  --tc-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ── the input.field ── */
.dvc .tcf { display: flex; flex-direction: column; gap: 8px; font: 13px/1.5 var(--tc-mono); color: var(--tc-white); }
.dvc .tcf-out { min-height: 96px; max-height: 280px; overflow: auto; padding: 8px 10px; border: 1px solid var(--tc-line); border-radius: 8px; background: var(--tc-black); }
.dvc .tcf-line { display: flex; gap: 10px; margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dvc .tcf-who { flex: 0 0 auto; min-width: 6ch; color: var(--tc-plasma); font-weight: 700; }
.dvc .tcf-txt { flex: 1 1 auto; min-width: 0; }
.dvc .tcf-row { display: flex; align-items: flex-end; gap: 8px; }
.dvc .tcf-in { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 160px; resize: vertical; padding: 10px 12px; border: 1px solid var(--tc-line); border-radius: 8px;
  background: #0b0f15; color: var(--tc-white); font: 14px/1.4 var(--tc-mono); box-sizing: border-box; }
.dvc .tcf-in:focus { outline: none; border-color: var(--tc-plasma); }
.dvc .tcf-t, .dvc .tcf-send { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid var(--tc-line); border-radius: 8px; background: var(--tc-panel);
  color: var(--tc-white); font: 700 16px var(--tc-mono); cursor: pointer; }
.dvc .tcf-t { color: var(--tc-ignition); border-color: rgba(255, 122, 24, .5); }
.dvc .tcf-t.is-on, .dvc .tcf-t:hover { background: var(--tc-ignition); color: var(--tc-black); }
.dvc .tcf-send:hover { border-color: var(--tc-plasma); color: var(--tc-plasma); }
.dvc .tcf-mode { margin: 0; color: var(--tc-dim); font-size: 11.5px; }
.dvc .tcf.is-terminal .tcf-out { border-color: rgba(54, 211, 153, .45); }
.dvc .tcf.is-terminal .tcf-in { border-color: rgba(54, 211, 153, .6); color: var(--tc-go); }
.dvc .tcf.is-terminal .tcf-who { color: var(--tc-go); }

/* ── the control.panel ── */
.tcp { position: fixed; top: 0; left: 0; bottom: 0; z-index: 225; width: min(380px, 92vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tc-panel); color: var(--tc-white); border-right: 1px solid var(--tc-line); box-shadow: 8px 0 32px rgba(0, 0, 0, .55);
  font: 13px/1.5 var(--tc-mono); padding: 0 0 24px; box-sizing: border-box; }
.tcp[hidden] { display: none; }
.tcp-top { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--tc-panel); border-bottom: 1px solid var(--tc-line); }
.tcp-title { letter-spacing: .12em; text-transform: uppercase; color: var(--tc-ignition); }
.tcp-x { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--tc-dim); font: 22px var(--tc-mono); cursor: pointer; }
.tcp-x:hover { color: var(--tc-white); }
.tcp-strip { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--tc-line); background: var(--tc-black); }
.tcp-strip__k { grid-column: 1 / -1; color: var(--tc-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.tcp-strip__v { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.tcp-strip__c { align-self: center; }
.tcp-strip__c.is-up { color: var(--tc-go); } .tcp-strip__c.is-down { color: var(--tc-danger); }
.tcp-spark { grid-column: 1 / -1; width: 100%; height: 28px; }
.tcp-spark__l { fill: none; stroke: var(--tc-plasma); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tcp-sec { border-bottom: 1px solid var(--tc-line); }
.tcp-sec__h { display: flex; align-items: center; min-height: 44px; padding: 0 14px; cursor: pointer; color: var(--tc-gold); letter-spacing: .08em; font-weight: 700; list-style: none; }
.tcp-sec__h::-webkit-details-marker { display: none; }
.tcp-sec__h::before { content: '▸'; margin-right: 8px; color: var(--tc-dim); }
.tcp-sec[open] > .tcp-sec__h::before { content: '▾'; }
.tcp-sec__b { padding: 0 14px 12px; }
.tcp-kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.tcp-kv dt { color: var(--tc-dim); } .tcp-kv dd { margin: 0; overflow-wrap: anywhere; }
.tcp-line { margin: 0 0 4px; overflow-wrap: anywhere; } .tcp-note { margin: 6px 0 0; color: var(--tc-dim); font-size: 12px; }
.tcp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tcp-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--tc-line); border-radius: 8px; background: var(--tc-black); color: var(--tc-white); font: 700 12.5px var(--tc-mono); letter-spacing: .08em; cursor: pointer; }
.tcp-btn:hover { border-color: var(--tc-plasma); color: var(--tc-plasma); }
.tcp-tog { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.tcp-tog input { width: 18px; height: 18px; accent-color: var(--tc-ignition); }
.tcp-full { display: flex; align-items: center; min-height: 44px; margin: 12px 14px 0; padding: 0 12px; border: 1px solid rgba(63, 169, 245, .5); border-radius: 8px; color: var(--tc-plasma); text-decoration: none; }
.tcp-full:hover { background: rgba(63, 169, 245, .1); }
@media (prefers-reduced-motion: reduce) { .tcp { box-shadow: none; } }