/* ============================================================
   OneQ — phosphor CRT terminal (interactive)
   direction: one committed aesthetic — a real console.
   one face, one hue family, zero cards, zero gradients-as-decoration.
   ============================================================ */

:root {
  --bg:     #060907;
  --line:   #15241b;
  --phos:   #7fdba0;
  --ink:    #e9ffee;
  --dim:    #49654f;
  --faint:  #26382c;
  --acc:    #49ff88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--phos);
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, Menlo,
    "SF Mono", monospace;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---- CRT texture: the one committed surface treatment ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(233, 255, 238, 0.020) 0 1px,
    transparent 1px 3px
  );
  animation: crt-breathe 9s steps(24) infinite;
}
@keyframes crt-breathe {
  0%, 100% { opacity: 1; }
  38%      { opacity: 0.84; }
  39%      { opacity: 1; }
  71%      { opacity: 0.92; }
  72%      { opacity: 1; }
}

::selection { background: var(--acc); color: #04170b; }

/* ---- chrome bars ------------------------------------------------ */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  user-select: none;
}
.bar-r::before { content: "[ "; color: var(--acc); }
.bar-r::after  { content: " ]"; color: var(--acc); }

.statusline {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.62rem 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--dim);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.sl-key   { color: var(--acc); font-weight: 600; }
.sl-dim   { color: var(--faint); }
.sl-grow  { flex: 1; }
#sl-cmd   { color: var(--dim); white-space: nowrap; }

/* ---- the terminal itself ---------------------------------------- */
.term {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 4vw, 2.5rem) 4rem;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.term:focus { outline: none; }
.term::-webkit-scrollbar { width: 8px; }
.term::-webkit-scrollbar-thumb { background: var(--line); }

.tline {
  font-size: clamp(0.86rem, 1.6vw + 0.3rem, 0.98rem);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.55em;
}
.out      { color: var(--phos); }
.out-name { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
.faint    { color: var(--faint); }
.dim      { color: var(--dim); }
.hint     { margin-top: 0.9em; color: var(--dim); }
.hint b   { color: var(--acc); font-weight: 600; }

.u  { color: var(--acc); }          /* user@host */
.pd { color: var(--phos); }         /* path      */
.sy { color: var(--dim); }          /* % symbol  */
.typed { color: var(--ink); }

/* matches the native caret of desktop inputs: thin accent bar,
   same color, same blink rhythm */
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: middle;
  background: var(--acc);
}
.js .caret { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* static caret inside the read-only transcript: JS users get a live one */
.js-caret { display: none; }
.js .js-caret { display: inline-block; }

/* ---- ascii art blocks -------------------------------------------- */
/* logos prefer one horizontal row; flex-wrap drops them to a new line
   only when there is not enough space left */
.art-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem 3rem;
  margin: 0.9em 0 1.1em;
}

/* shared size budgeted for all three logos side by side:
   180 glyph cols at JetBrains Mono's 0.60em advance + padding/gap slack
   -> they stay on one row on any reasonably wide viewport */
.art {
  font-family: inherit;
  color: var(--phos);
  font-size: min(10.5px, calc((100vw - 12rem) / 112));
  line-height: 1.05;
  white-space: pre;
  user-select: text;
  transition: color 0.25s ease;
}
.art:hover { color: var(--ink); }

/* narrow screens: let them stack and size each block by its own width */
@media (max-width: 899px) {
  .art-row { flex-direction: column; align-items: center; gap: 1.6rem; }
  .art { font-size: min(10px, calc(90vw / 42)); }
}

/* ---- the live prompt's real input: browser-native editing -------- */
.tline.live { white-space: pre; }

/* the visible command is a mirror span; the real textarea is an
   invisible overlay that owns all editing (native caret, IME, keys) */
.tline.live { position: relative; }

.ask-live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
}

.ty-mirror {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  padding-right: 2ch;
}
.mir-before, .mir-after { white-space: pre-wrap; }
.mir-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: middle;
  background: var(--acc);
  animation: blink 1.06s steps(1) infinite;
}

.cmd-in {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  resize: none;
  overflow: hidden;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.cmd-in:focus { outline: none; }

/* mobile ask input (tap `ask` in the tray -> keyboard) */
.cmd-ask {
  font: inherit;
  display: inline-block;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  min-width: 6ch;
  flex: 1 1 auto;
  max-width: min(64vw, 52ch);
  min-height: 1.55em;
  caret-color: var(--acc);
  line-height: inherit;
  vertical-align: top;
  height: 1.55em;
  resize: none;
  overflow: hidden;
}
.cmd-ask:focus { outline: none; }

/* ---- intro: elements start hidden (JS only), then appear in order -- */
html.js [data-boot] { visibility: hidden; }
.shown {
  animation: fade-show 0.45s ease-out both;
}
@keyframes fade-show {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- mobile command tray (touch devices only) ---------------------- */
.cmd-tray {
  display: none;                 /* JS/CSS agree: coarse pointers get it */
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: #081009;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  user-select: none;
}
.cmd-tray::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--phos);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.34rem 0.72rem;
  touch-action: manipulation;
}
.chip:hover, .chip:active { color: var(--acc); border-color: var(--acc); }
.chip.back { color: var(--acc); border-style: dashed; }
.chip:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* show the tray on ANY plausible touch situation, incl. browsers that
   do not implement hover/pointer queries and plain narrow screens */
@media (pointer: coarse), (hover: none), (max-width: 820px) {
  .cmd-tray { display: flex; }
}


/* ---- TY session palette (ty login) -------------------------------- */
body.ty-mode {
  --acc:   #ff9ecb;
  --phos:  #e8a7c3;
  --ink:   #ffe6f2;
  --dim:   #9c7286;
  --faint: #4a3644;
  --line:  #34222d;
}

/* ---- optional phosphor palettes (theme command) ------------------- */
html[data-theme="amber"] {
  --acc:   #ffc46b;
  --phos:  #d9a878;
  --ink:   #fff1d6;
  --dim:   #8f7351;
  --faint: #4b3b26;
  --line:  #332a1a;
}
html[data-theme="mono"] {
  --acc:   #f2f2f2;
  --phos:  #c7cbc7;
  --ink:   #ffffff;
  --dim:   #7e827e;
  --faint: #404340;
  --line:  #262926;
}

/* reusing an on-screen logo pulses it instead of reprinting */
.art.flash {
  animation: art-flash 1.1s ease-out 1;
}
@keyframes art-flash {
  0%, 55%  { filter: brightness(1.5); }
  100%     { filter: brightness(1); }
}

/* ---- narrow screens ----------------------------------------------- */
@media (max-width: 720px) {
  .bar-r { display: none; }
  .sl-dim { display: none; }
  #sl-cmd { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}