/* THE GOD TERMINAL — command window (js/console.js).
 * The window chrome comes from windows.css; this styles what lives inside it:
 * a scrolling history, a pinned glowing prompt, colour-coded output, tappable
 * commands and paths, and the little performances (launch bars, stamps, glitches). */

.win.con-win > .win-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.con {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  text-shadow: 0 0 calc(6px * var(--glow-k)) var(--glow);
}

/* ───────── history ───────── */
/* A column, so a short history sits on the prompt like a real console. */
.con-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 1.15rem 0.7rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 0.8rem);
  mask-image: linear-gradient(to bottom, transparent, #000 0.8rem);
}
.con-log {
  margin-top: auto;
  user-select: text;
  -webkit-user-select: text;
}
.con-line {
  position: relative;
  min-height: 1.45em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Each command starts a little block of its own. */
.con-echo { margin-top: 0.6rem; }
.con-echo:first-child { margin-top: 0; }
.con-echo .c-cmd { color: var(--text-bright); font-weight: 700; }

/* Document text from cat: a lit gutter so files read as files. */
.con-doc {
  padding-left: 0.9rem;
  margin-left: 0.15rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
}
.con-art { line-height: 1.05; min-height: 1.05em; }
.con-hint { color: var(--dim); }

/* ───────── colour vocabulary (classes c-* from js) ───────── */
.con .c-text { color: var(--text); }
.con .c-bright { color: var(--text-bright); }
.con .c-dim { color: var(--dim); }
.con .c-accent { color: var(--accent); }
.con .c-accent2 { color: var(--accent-2); }
.con .c-accent3 { color: var(--accent-3); }
.con .c-good { color: var(--good); }
.con .c-warn { color: var(--warn); }
.con .c-bad { color: var(--bad); }
.con .c-key { color: var(--syn-key); }
.con .c-str { color: var(--syn-str); }
.con .c-num { color: var(--syn-num); }
.con .c-const { color: var(--syn-const); }
.con .c-b { font-weight: 700; }
.con .c-i { font-style: italic; }
.con .c-dir { color: var(--accent-2); font-weight: 700; }
.con .c-file { color: var(--text); }
.con .c-user { color: var(--accent); font-weight: 700; }
.con .c-host { color: var(--dim); }
.con .c-punct { color: var(--dim); }
.con .c-path { color: var(--accent-2); font-weight: 700; }
.con .c-sigil { color: var(--text-bright); font-weight: 700; }

/* ───────── prompt bar ───────── */
.con-bar {
  position: relative;
  flex: none;
  overflow: hidden;
  padding: 0.7rem 1.15rem 0.8rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 10%, transparent),
    color-mix(in srgb, var(--text) 3%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line-bright) 55%, transparent);
  cursor: text;
}
/* Lit seam above the prompt, brightest in the middle. */
.con-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, var(--line-bright) 30%, var(--line-bright) 70%, transparent 98%);
  box-shadow: 0 0 calc(14px * var(--glow-k)) 1px var(--glow);
  pointer-events: none;
}
.con-entry-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.con-prompt .c-user,
.con-prompt .c-path { text-shadow: 0 0 calc(12px * var(--glow-k)) var(--glow); }
.con-prompt .c-path { display: inline-block; }
.con-entry {
  color: var(--text-bright);
  font-weight: 500;
  text-shadow: var(--text-glow);
}
/* Live colouring: a recognised command lights up; the suggestion trails dimly. */
.con-entry .con-known {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 calc(12px * var(--glow-k)) var(--glow);
}
.con-entry .con-ghost {
  color: color-mix(in srgb, var(--dim) 85%, transparent);
  font-weight: 400;
  text-shadow: none;
  cursor: pointer;
}

/* The underscore cursor: a glowing bar under the character at the caret. Every edit
 * redraws it, so it stays lit while typing and only blinks when the line is idle. */
.con-cursor { position: relative; }
.con-cursor::after {
  content: '';
  position: absolute;
  left: 0.03em;
  right: 0.03em;
  bottom: -0.05em;
  height: max(2px, 0.2em);
  border-radius: 1px;
  background: var(--cursor);
  box-shadow: 0 0 4px var(--cursor), 0 0 calc(14px * var(--glow-k) + 2px) var(--glow);
  animation: con-blink 1.1s linear infinite;
}
/* Lit most of the cycle, with a quick phosphor fade rather than a hard cut. */
@keyframes con-blink { 0%, 58% { opacity: 1; } 66%, 93% { opacity: 0; } }

/* The character just typed lands with a bright little pop. */
.con-pop {
  display: inline-block;
  animation: con-pop 200ms cubic-bezier(.2, 1.7, .4, 1) both;
}
@keyframes con-pop {
  from { transform: translateY(-0.2em) scale(1.5); color: var(--cursor); text-shadow: 0 0 12px var(--cursor), 0 0 2px #fff; }
}

/* Visually hidden, yet focusable so phones raise their keyboard. 16px stops iOS zooming in. */
.con-input {
  position: absolute;
  left: 1.15rem;
  bottom: 0.8rem;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  pointer-events: none;
}

/* Enter: a band of light sweeps across the prompt. */
.con-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--text-bright) 30%, transparent) 50%, transparent 80%);
}

/* ───────── streaming ───────── */
.con-log > .is-new { animation: con-in 280ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes con-in { from { opacity: 0; transform: translateX(-0.6rem); } }
/* A brief highlight trails each new line like a print head. */
.con-line.is-new::before {
  content: '';
  position: absolute;
  inset: 0 -1.15rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-bright) 16%, transparent), transparent 70%);
  animation: con-glint 520ms ease-out both;
  pointer-events: none;
}
@keyframes con-glint { to { opacity: 0; } }
/* Blocks (tables, help, palettes) stream row by row instead. */
.con-log > .con-block.is-new { animation: none; }
.con-block.is-new :is(.con-sec-title, .con-row, .con-kv-row, .con-trow, .con-ls > *) {
  animation: con-in 300ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}

/* ───────── tappable text ───────── */
.con-chip {
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: 0 0.15em;
  border: 0;
  border-radius: 3px;
  background: none;
  font: inherit;
  text-shadow: inherit;
  white-space: pre;
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.26em;
  transition: transform 120ms cubic-bezier(.2, 1.6, .4, 1), background-color 120ms, text-decoration-color 120ms;
}
.con-chip:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  text-decoration-color: currentColor;
}
.con-chip.is-pressed {
  transform: scale(1.14);
  background: color-mix(in srgb, currentColor 24%, transparent);
}
.con-chip:focus-visible,
.con-row:focus-visible,
.con-trow:focus-visible { outline: 1px solid var(--line-bright); outline-offset: 1px; }

/* ───────── help ───────── */
/* Two columns side by side when both fit unwrapped, otherwise one stacked list. */
.con-help {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2.25rem;
  padding: 0.2rem 0 0.35rem;
}
.con-col { flex: 1 1 auto; min-width: 0; }
.con-sec-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.25rem 0 0.1rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-3);
}
.con-sec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-3) 55%, transparent), transparent);
}
.con-row,
.con-trow {
  appearance: none;
  width: calc(100% + 0.8rem);
  margin: 0 -0.4rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: var(--text);
  text-shadow: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms cubic-bezier(.2, 1.6, .4, 1), background-color 120ms;
}
.con-row {
  display: grid;
  grid-template-columns: var(--cw, 14ch) minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: baseline;
}
.con-row:hover,
.con-trow:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.con-row.is-pressed,
.con-trow.is-pressed {
  transform: scale(1.035);
  background: color-mix(in srgb, var(--text) 17%, transparent);
}
.con-cmd { color: var(--accent); font-weight: 700; white-space: nowrap; }
.con-desc { color: var(--text); }
.con-also {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  margin-top: 0.35rem;
}
.con-also-label { color: var(--dim); }
.con-also-list { display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
.con-also .con-chip { margin-left: -0.15em; text-decoration: none; }

/* ───────── tables ───────── */
.con-kv { padding: 0.1rem 0; }
.con-kv-row {
  display: grid;
  grid-template-columns: var(--kw, 12ch) minmax(0, 1fr);
  align-items: baseline;
}
.con-k { color: var(--dim); }
.con-v { color: var(--text-bright); white-space: pre-wrap; }

/* ───────── ls ───────── */
.con-ls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.05rem 1.9rem;
  padding: 0.05rem 0;
}
.con-ls .con-chip { margin-left: -0.15em; text-decoration: none; }

/* ───────── palettes ───────── */
.con-swatch {
  display: inline-flex;
  gap: 2px;
  margin-right: 0.55rem;
  padding: 2px;
  border: 1px solid;
  border-radius: 3px;
  vertical-align: -0.15em;
  box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.8);
}
.con-swatch i { width: 0.7rem; height: 0.9rem; border-radius: 1.5px; }
.con-themes { padding: 0.15rem 0; }
.con-trow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 1.9rem;
}
.con-trow .con-swatch { margin: 0; }
.con-tnum { width: 1ch; color: var(--dim); font-weight: 700; }
.con-tname { font-weight: 700; }
.con-tcur { color: var(--good); font-weight: 700; }
.con-trow.is-current { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* ───────── first-open banner ───────── */
.con-banner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0.1rem 0 0.4rem;
}
.con-banner-mark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9cqi, 3.6rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  text-shadow: 0 0 calc(22px * var(--glow-k)) var(--glow), 0 0 2px var(--accent);
}
.con-banner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-bright), transparent);
  box-shadow: 0 0 calc(10px * var(--glow-k)) var(--glow);
  transform-origin: left;
}
.con-banner.is-new .con-banner-mark { animation: con-type 560ms steps(12, end) backwards, con-flicker 820ms both; }
.con-banner.is-new::after { animation: con-draw 640ms 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes con-draw { from { opacity: 0; transform: scaleX(0); } }
@keyframes con-flicker { 0%, 40%, 46%, 70%, 76% { opacity: 1; } 43%, 73% { opacity: 0.3; } }

/* ───────── whoami ───────── */
.con-who { padding: 0.15rem 0 0.1rem; }
.con-big {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10cqi, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-bright);
  text-shadow: 0 0 calc(18px * var(--glow-k)) var(--glow), 0 0 2px var(--accent);
}
.con-who.is-new .con-big { animation: con-type 520ms steps(14, end) backwards; }
/* Generous insets so the reveal never crops the glow into a visible box. */
@keyframes con-type { from { clip-path: inset(-40% 100% -40% -10%); } to { clip-path: inset(-40% -10% -40% -10%); } }

/* ───────── fortune ───────── */
.con-fortune {
  display: inline-block;
  max-width: 100%;
  margin: 0.3rem 0 0.2rem;
  padding: 0.55rem 1.1rem 0.6rem;
  border: 1px dashed color-mix(in srgb, var(--accent-3) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-3) 7%, transparent);
  box-shadow: 0 0 18px -8px var(--accent-3);
}
.con-fortune-text { color: var(--accent-3); font-weight: 700; }
.con-fortune-nums { margin-top: 0.15rem; font-size: 0.875rem; color: var(--dim); letter-spacing: 0.06em; }
.con-fortune-wrap.is-new .con-fortune { animation: con-unfold 420ms cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: left center; }
@keyframes con-unfold { from { opacity: 0; transform: scaleX(0.2) rotate(-2deg); } }

/* ───────── rm: a rubber stamp ───────── */
.con-stamp {
  display: inline-block;
  padding: 0 0.45em;
  border: 2px solid var(--bad);
  border-radius: 3px;
  color: var(--bad);
  font-weight: 800;
  letter-spacing: 0.16em;
  rotate: -4deg;
  box-shadow: 0 0 12px -3px var(--bad), inset 0 0 8px -3px var(--bad);
}
.is-new .con-stamp { animation: con-stamp 340ms 60ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes con-stamp { from { opacity: 0; transform: scale(2.6); } 55% { opacity: 1; } }

/* ───────── launches and reroutes ───────── */
.con-launch-bar {
  position: relative;
  display: inline-block;
  width: 7.5rem;
  height: 0.45rem;
  margin-left: 0.8rem;
  vertical-align: 0.1em;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.con-launch-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--text-bright));
  box-shadow: 0 0 10px var(--glow);
  transform-origin: left;
}
.con-launch.is-new .con-launch-bar::after { animation: con-fill var(--ms, 380ms) cubic-bezier(.55, 0, .25, 1) both; }
@keyframes con-fill { from { transform: scaleX(0); } }

/* run classicmode.exe: a tiny window springs open in front of the result. */
.con-spawn {
  position: relative;
  display: inline-block;
  width: 1.15em;
  height: 0.85em;
  margin-right: 0.6em;
  vertical-align: -0.05em;
  border: 2px solid var(--good);
  border-top-width: 0.24em;
  border-radius: 2px;
  box-shadow: 0 0 10px -1px var(--good), inset 0 0 6px -2px var(--good);
}
.con-opened.is-new .con-spawn { animation: con-spawn 520ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes con-spawn {
  0% { opacity: 0; transform: scale(0.2) translateY(0.4em); }
  45% { opacity: 1; border-color: #fff; box-shadow: 0 0 18px 2px var(--good); }
}
.con-link {
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.con-link:hover { color: var(--text-bright); }

.con-reroute.is-new .c-accent {
  display: inline-block;
  animation: con-split 600ms steps(6, end) both;
}
@keyframes con-split {
  0% { transform: translateX(3px); text-shadow: -3px 0 var(--bad), 3px 0 var(--accent-2); }
  30% { transform: translateX(-2px); text-shadow: 2px 0 var(--bad), -2px 0 var(--accent-2); }
  60% { transform: translateX(1px); text-shadow: -1px 0 var(--bad), 1px 0 var(--accent-2); }
}

/* ───────── opening ───────── */
.con.is-opening .con-bar { animation: con-rise 380ms 110ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes con-rise { from { opacity: 0; transform: translateY(0.7rem); } }

/* ───────── narrow windows and touch ───────── */
@container (max-width: 34rem) {
  .con .c-host,
  .con .c-perm,
  .con-cmd .c-dim { display: none; }
  .con-row { grid-template-columns: var(--cn, 10ch) minmax(0, 1fr); }
  .con-scroll { padding-inline: 0.85rem; }
  .con-bar { padding-inline: 0.85rem; }
  .con-line.is-new::before { inset: 0 -0.85rem; }
}
/* Phones get no backdrop blur, so give the history a firmer backing to keep it crisp. */
@media (max-width: 599px) {
  .con { background: color-mix(in srgb, var(--bg) 72%, transparent); }
}
@media (pointer: coarse) {
  .con-row { min-height: 2.6rem; align-items: center; }
  .con-trow { min-height: 2.75rem; }
  .con-ls { gap: 0.15rem 1.1rem; }
  .con-ls .con-chip { padding: 0.45rem 0.35rem; margin-left: -0.35rem; }
  .con-also-list { column-gap: 0.5rem; }
  .con-also .con-chip { padding: 0.5rem 0.35rem; margin-left: -0.35rem; }
}

/* ───────── reduced motion: fades only, a steady cursor ───────── */
html[data-reduced-motion="on"] .con-log > .is-new,
html[data-reduced-motion="on"] .con-block.is-new :is(.con-sec-title, .con-row, .con-kv-row, .con-trow, .con-ls > *),
html[data-reduced-motion="on"] .con.is-opening .con-bar { animation-name: con-fade; }
html[data-reduced-motion="on"] :is(.con-pop, .con-reroute.is-new .c-accent, .con-who.is-new .con-big, .is-new .con-stamp, .con-opened.is-new .con-spawn,
  .con-fortune-wrap.is-new .con-fortune, .con-banner.is-new .con-banner-mark, .con-banner.is-new::after) { animation: none; }
html[data-reduced-motion="on"] .con-cursor::after { animation: none; }
@keyframes con-fade { from { opacity: 0; } }