/* System console (js/terminal.js): a plate that drops from the top of the screen. It is not
   modal, so the scene stays live under it. Owner: HUD/overlays workstream (C). */

.console {
  /* The bottom-right corner is cut at the major angle: 28px over 200px is tan(8deg). */
  --console-cut-x: 200px;
  --console-cut-y: 28px;
  --console-gutter: clamp(var(--s-5), 3.6vw, var(--s-8));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-console);
  height: min(45svh, calc(420px * var(--k)));
  min-height: 240px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-2);
  padding: var(--s-4) var(--console-gutter) calc(var(--console-cut-y) + var(--s-3));
  color: var(--text-2);
  font-family: var(--font-code);
  font-size: var(--fs-sm);
  line-height: 1.5;
  isolation: isolate;
}

.console[hidden] {
  display: none;
}

.console-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The plate: opaque deep blue (it animates, so no backdrop blur) with scanlines and a
   hairline along the flat part of the bottom edge. */
.console-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--cyan) 45%, transparent) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--paper) 2.5%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--abyss), var(--night) 78%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--console-cut-y)), calc(100% - var(--console-cut-x)) 100%, 0 100%);
}

/* The red slash along the cut. */
.console-plate::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--console-cut-y) - 1px);
  width: calc(var(--console-cut-x) + 2px);
  height: 2px;
  background: var(--red);
  transform-origin: 100% 50%;
  rotate: var(--tilt-major);
}

/* ------------------------------------------------------------------- head */

.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-width: 0;
}

.console-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--cyan);
  font-family: var(--font-hud);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.console-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.console-tty {
  padding: 2px 6px 1px;
  color: var(--ink);
  background: var(--cyan);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.console-close {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4) 0 var(--s-2);
  border: 0;
  color: var(--paper);
  background: none;
  font-family: var(--font-hud);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
}

.console-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--blue) 80%, var(--deep));
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  transition: background-color var(--dur-1) var(--ease-out);
}

.console-close:hover::before {
  background: var(--hot);
}

.console-close:focus-visible {
  outline: none;
}

/* The plate is clipped, so the focus ring is drawn inside it. */
.console-close:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--paper);
}

.console-close-key {
  min-width: 1.6em;
  padding: 2px 5px 1px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

/* -------------------------------------------------------------------- log */

.console-log {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--s-2);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cyan) 40%, transparent) transparent;
}

.console-line {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.console-line[data-tone="dim"],
.console-line [data-tone="dim"] {
  color: var(--text-3);
}

.console-line[data-tone="accent"],
.console-line [data-tone="accent"],
.console-line [data-tone="art"] {
  color: var(--cyan);
}

.console-line[data-tone="ok"] {
  color: var(--ice);
}

.console-line[data-tone="error"] {
  color: var(--paper);
}

/* Errors carry a red diamond, so they never rely on colour alone. */
.console-line[data-tone="error"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 1ch;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  vertical-align: 0.05em;
}

.console-line--cmd {
  margin-top: var(--s-1);
  color: var(--paper);
}

.console-ps1 {
  color: var(--cyan);
  white-space: nowrap;
}

.console-line a {
  color: var(--ice);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ice) 45%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-1) linear, text-decoration-color var(--dur-1) linear;
}

.console-line a:hover,
.console-line a:focus-visible {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

.console-line a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- prompt */

.console-prompt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1ch;
  margin: 0;
  padding: var(--s-2) 0 var(--s-1);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-1) linear;
}

.console-prompt:focus-within {
  border-bottom-color: var(--cyan);
}

.console-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--paper);
  background: transparent;
  font: inherit;
  /* 16px keeps iOS from zooming in on focus. */
  font-size: max(16px, var(--fs-md));
  line-height: 1.5;
  caret-color: var(--cyan);
  outline: none;
}

.console-input::selection,
.console-log ::selection {
  color: var(--ink);
  background: var(--cyan);
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 920px) {
  .console {
    --console-cut-x: 100px;
    --console-cut-y: 14px;
    --console-gutter: var(--s-4);
    height: 55svh;
    padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
    font-size: var(--fs-xs);
  }

  .console-close {
    min-height: 44px;
  }
}