/* Copyright © 2026 EuKreate, Inc. All rights reserved. */
/* One terminal look for the console's docked terminal and the home page: dark in both themes like any terminal, a
   title bar with the three window dots, the page's mono face at one size, and the colours a shell uses. */
.term { --tx-bg: #0C0E10; --tx-raise: #181B1E; --tx-line: #262A2E; --tx-text: #E6E8E6; --tx-muted: #8B9396; --tx-faint: #5F6A6F;
  --tx-ok: #4ADE80; --tx-warn: #F5B53A; --tx-bad: #FF7A6E; --tx-link: #7CC8FF;
  background: var(--tx-bg); color: var(--tx-text); font: 400 13px/1.6 var(--mono); font-variant-ligatures: none; }
.term-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--tx-line); background: var(--tx-raise); color: var(--tx-muted); font: 400 12.5px var(--sans); }
.term-title > :nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.term-title > :last-child { justify-self: end; }
.term-dots { display: flex; gap: 8px; }
.term-dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.term-dots i:nth-child(2) { background: #FEBC2E; } .term-dots i:nth-child(3) { background: #28C840; }
.term-user { color: var(--tx-ok); }
.term-ok { color: var(--tx-ok); } .term-muted { color: var(--tx-muted); }
.term-cursor { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: text-bottom; background: var(--tx-text); }

/* The docked terminal. */
.tx { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.tx-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tx-chips .chip { padding: 1px 9px; border: 1px solid var(--tx-line); border-radius: 4px; background: none; color: var(--tx-muted); font: 400 12px var(--mono); cursor: pointer; }
.tx-chips .chip:hover { border-color: var(--tx-faint); color: var(--tx-text); }
.tx-out { flex: 1; overflow: auto; padding: 10px 16px 4px; scrollbar-color: #2A2E32 transparent; }
.tx-line { white-space: pre; min-height: 1.6em; }
.tx-line.cmd { margin-top: 8px; color: var(--tx-text); } .tx-line.cmd b { color: var(--tx-ok); font-weight: 400; }
.tx-line.ok { color: var(--tx-ok); } .tx-line.warn { color: var(--tx-warn); } .tx-line.bad { color: var(--tx-bad); } .tx-line.muted { color: var(--tx-muted); }
.tx-line a { color: var(--tx-link); text-decoration: underline; text-underline-offset: 2px; }
.tx-line.busy::after { content: ""; display: inline-block; width: 0.6em; height: 1.15em; vertical-align: text-bottom; background: var(--tx-text); animation: tx-blink 1s steps(2) infinite; }
@keyframes tx-blink { 50% { opacity: 0; } }
/* The input sits on the line after the output, as a shell's prompt does. */
.tx-in { display: flex; align-items: baseline; gap: 0.6em; padding: 0 16px 12px; }
.tx-prompt { flex: none; color: var(--tx-text); } .tx-prompt b { color: var(--tx-ok); font-weight: 400; }
/* Repeated classes outrank the console's field style for bare inputs: a prompt has no box. */
.tx.term .tx-in input, .tx.term .tx-in input:focus { flex: 1; width: auto; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; box-shadow: none; color: var(--tx-text); font: inherit; caret-color: var(--tx-text); }
@media (prefers-reduced-motion: reduce) { .tx-line.busy::after { animation: none; } }
@media (max-width: 720px) {
  .term { font-size: 12px; }
  .tx-chips { display: none; }
  .term-title { grid-template-columns: auto 1fr; }
  .term-title > :nth-child(2) { text-align: left; }
  .tx-out { padding: 8px 12px 4px; }
  .tx-in { flex-wrap: wrap; padding: 0 12px 10px; }
  .tx-prompt b { display: none; }
}