/* h4d35x0 terminal homepage.
   Uppercase = machine. lowercase = persona.
   The DOM is the filesystem: every node the terminal can print also exists as
   real markup, so the page is complete and readable with JavaScript absent. */

.h4-term {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Leave room for the sticky command bar so the prompt stays above the fold. */
  min-height: calc(100vh - 4.4rem);
  min-height: calc(100svh - 4.4rem);
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 1.6rem 2rem;
}

/* ---- status bar ---- */
.h4-term__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding: 1.6rem 0 1.2rem;
  border-bottom: 1px solid var(--h4-line);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.15rem;
  color: var(--h4-dim);
}
.h4-term__host { color: var(--h4-fg); }
.h4-term__bar b { font-weight: 400; color: var(--h4-accent); }
.h4-term__bar .warn { color: var(--h4-warn); }
.h4-term__spacer { flex: 1 1 auto; }

/* ---- scrollback ---- */
.h4-term__screen {
  overflow-y: auto;
  padding: 2rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--h4-faint) transparent;
}
.h4-term__screen::-webkit-scrollbar { width: 8px; }
.h4-term__screen::-webkit-scrollbar-thumb { background: var(--h4-faint); }

.h4-echo {
  margin: 0 0 0.4rem;
  color: var(--h4-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.15rem;
}
.h4-echo b { color: var(--h4-accent); font-weight: 400; }
/* Arguments are the visitor's own input, shown exactly as typed. */
.h4-echo__args { text-transform: none; letter-spacing: 0.02em; }

.h4-out { margin: 0 0 2.4rem; max-width: 68ch; }
.h4-out p { margin: 0 0 1rem; }
.h4-out--err { color: var(--h4-warn); }

/* ---- node (project) ---- */
.h4-node {
  margin: 0 0 2rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--h4-line);
  max-width: 72ch;
}
.h4-node__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
}
.h4-node__name {
  margin: 0;
  font-family: var(--h4-mono);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h4-fg);
}
.h4-node__meta {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--h4-dim);
}
.h4-node__meta .lang { color: var(--h4-accent); }
.h4-node__body { margin: 0.8rem 0 0; color: var(--h4-fg); }
.h4-node__note { margin: 0.6rem 0 0; color: var(--h4-dim); font-size: 1.25rem; }
.h4-node__link {
  display: inline-flex;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.h4-node__link::before { content: '>'; color: var(--h4-accent); }
.h4-node__link:hover,
.h4-node__link:focus-visible { border-bottom-color: var(--h4-accent); }

/* ---- prompt ---- */
.h4-term__foot { border-top: 1px solid var(--h4-line); padding-top: 1.2rem; }

.h4-term__prompt { display: flex; align-items: baseline; gap: 0.8rem; }
.h4-term__ps1 {
  color: var(--h4-accent);
  white-space: nowrap;
  font-size: 1.35rem;
}
.h4-term__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--h4-fg);
  font: inherit;
  font-size: 1.35rem;
  caret-color: var(--h4-accent);
}
.h4-term__input:focus { outline: none; }
.h4-term__prompt:focus-within .h4-term__ps1 { color: var(--h4-accent); }

/* ---- clickable commands (never a typing test) ---- */
.h4-term__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.h4-chip {
  padding: 0.5rem 1rem;
  border: 1px solid var(--h4-line);
  background: transparent;
  color: var(--h4-dim);
  font: inherit;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.h4-chip:hover,
.h4-chip:focus-visible {
  border-color: var(--h4-accent);
  color: var(--h4-fg);
}
.h4-chip--shop {
  border-color: var(--h4-accent);
  color: var(--h4-accent);
}

/* ---- progressive enhancement ----
   Default (no JS): the source content is visible, the prompt is not.
   JS adds .is-armed, which flips it. A broken script therefore leaves a
   complete, readable page rather than an empty terminal. */
.h4-term__foot { display: none; }
.h4-term.is-armed .h4-term__foot { display: block; }
.h4-term.is-armed .h4-term__source { display: none; }

.h4-term__source > .h4-lede { max-width: 68ch; }

/* ---- the console window ----
   A bordered window with a title bar, a fixed-height scrollback that scrolls
   inside itself, and the prompt pinned to its bottom edge.

   Keyed on .is-term-armed, which only terminal.js sets. radar.js arms the same
   root, so keying on .is-armed would let a working radar and a broken
   terminal hide the static source block and leave nothing readable.
   With no JavaScript the window and chips are hidden and the source block,
   repositories and challenges, is the page. */
[data-h4-term]:not(.is-term-armed) .h4-term__window,
[data-h4-term]:not(.is-term-armed) .h4-term__chips { display: none; }
[data-h4-term].is-term-armed .h4-term__source { display: none; }

.h4-term__window {
  --h4-term-bg: #060807;
  margin: 1.6rem 0 0;
  border: 1px solid var(--h4-line);
  border-radius: 6px;
  background: var(--h4-term-bg);
  overflow: hidden;
  scroll-margin-top: 6rem;   /* clear the sticky nav when scrolled into view */
}
/* The input has no outline of its own, so the window carries the focus ring. */
.h4-term__window:focus-within { border-color: var(--h4-accent); }

.h4-term__titlebar {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 0.7rem 1.4rem;
  border-bottom: 1px solid var(--h4-line);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--h4-dim);
  user-select: none;
}
.h4-term__title { color: var(--h4-fg); }
.h4-term__titlebar .warn { font-weight: 400; color: var(--h4-warn); }

.h4-term__window .h4-term__screen {
  height: min(60vh, 52rem);
  min-height: 24rem;
  padding: 1.4rem 1.6rem 0.4rem;
  font-size: 1.3rem;
}
.h4-term__window .h4-out { margin-bottom: 1.4rem; }
.h4-term__window .h4-out p { margin-bottom: 0.2rem; white-space: pre-wrap; }

.h4-term__window .h4-term__prompt {
  padding: 0.9rem 1.6rem 1.1rem;
  border-top: 1px solid var(--h4-line);
  cursor: text;
}

@media screen and (max-width: 749px) {
  .h4-term__window .h4-term__screen { height: 55vh; min-height: 18rem; padding: 1.2rem; }
  .h4-term__titlebar { gap: 1rem; padding: 0.6rem 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .h4-term__caret { animation: h4-blink 1.2s step-end infinite; }
}
@keyframes h4-blink { 50% { opacity: 0; } }

@media screen and (max-width: 749px) {
  .h4-term { min-height: auto; }
  .h4-term__bar { letter-spacing: 0.1em; font-size: 1.05rem; }
  .h4-term__screen { padding: 1.6rem 0; }
}