/* ==========================================================================
   shell — the interactive terminal that opens the page.
   It is a real prompt: it takes focus, echoes what you type, keeps history and
   completes on Tab. Everything it prints is the site's own material.
   ========================================================================== */

.sh {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  box-shadow: var(--lift-3);
  cursor: text;
}

.sh:focus-within { border-color: var(--rule-hot); }

.sh__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-panel);
  font-size: var(--t-xs);
  color: var(--txt-3);
  letter-spacing: 0.06em;
  cursor: default;
}

.sh__out {
  padding: var(--s-4);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: var(--t-sm);
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hot) transparent;
}

.sh__line { white-space: pre-wrap; word-break: break-word; }
.sh__line--dim { color: var(--txt-3); }
.sh__line--acc { color: var(--phos); }
.sh__line--warn { color: var(--amber); }
.sh__line--err { color: var(--red); }
.sh__line--echo { color: var(--txt-2); }

/* The boot banner: block letters, phosphor on the second word. */
/* Deliberately small. The display wordmark beside this panel is the identity;
   this is the machine printing its own name at boot, which is a different job
   and should not compete with it. */
.sh__art {
  color: var(--txt);
  line-height: 1.02;
  white-space: pre;
  font-size: clamp(4.5px, 0.62vw, 7px);
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(41, 255, 155, 0.35);
  margin-block: 2px var(--s-3);
  overflow-x: auto;
}

.sh__art b { color: var(--phos); font-weight: 400; }

/* Blocky image output: one span per pixel, two characters wide so a pixel is
   roughly square in a monospace grid. */
.sh__img {
  white-space: pre;
  line-height: 0.82;
  font-size: clamp(6px, 1.05vw, 9px);
  margin-block: var(--s-2);
  overflow-x: auto;
  filter: drop-shadow(0 0 6px rgba(41, 255, 155, 0.18));
}

.sh__cap {
  color: var(--txt-3);
  font-size: var(--t-xs);
  margin-bottom: var(--s-3);
}

/* The input row is a real input, so mobile keyboards and screen readers work. */
.sh__form {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--phos) 3%, var(--bg-inset));
}

.sh__ps {
  flex: none;
  font-size: var(--t-sm);
  color: var(--phos-mid);
  white-space: nowrap;
}

.sh__ps b { color: var(--cyan-dim); font-weight: 400; }

.sh__in {
  flex: 0 1 auto;
  width: 2ch;
  max-width: 100%;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: var(--t-sm);
  caret-color: transparent;
  padding: 0;
}

.sh__in::placeholder { color: var(--txt-3); }

/* A drawn block cursor, so it reads as a terminal rather than a text field. */
.sh__cursor {
  flex: none;
  width: 8px;
  height: 15px;
  background: var(--phos);
  translate: 0 3px;
  box-shadow: 0 0 8px rgba(41, 255, 155, 0.6);
}

.sh:focus-within .sh__cursor { animation: caret 1.05s steps(1) infinite; }
.sh:not(:focus-within) .sh__cursor { opacity: 0.28; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sh:focus-within .sh__cursor { animation: none; }
}

.sh__hint {
  margin-left: auto;
  flex: none;
  font-size: var(--t-xs);
  color: var(--txt-3);
  letter-spacing: 0.06em;
}

@media (max-width: 620px) {
  .sh__hint { display: none; }
}

/* Command list and directory listings share one dense two-column grid. */
.sh__grid {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: 0 var(--s-3);
  margin-block: 2px var(--s-2);
}

.sh__grid dt { color: var(--phos); }
.sh__grid dd { color: var(--txt-2); margin: 0; }

.sh__ls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17ch, 1fr));
  gap: 0 var(--s-4);
  margin-block: 2px var(--s-2);
}

.sh__ls i { font-style: normal; color: var(--txt-2); }
.sh__ls i.dir { color: var(--cyan); }
.sh__ls i.img { color: var(--violet); }

/* ---- pixel palette ------------------------------------------------------
   One class per palette index, matching ORDER in ascii.js. The blocky images
   used to carry style="color:…" on every run; classes keep the whole page free
   of generated inline styles, which is what lets the CSP drop unsafe-inline.
   ------------------------------------------------------------------------ */

.px-0  { color: #0a0f14; }   /* ground */
.px-1  { color: var(--phos-dim); }
.px-2  { color: var(--phos-mid); }
.px-3  { color: var(--phos); }
.px-4  { color: var(--txt); }
.px-5  { color: var(--amber); }
.px-6  { color: var(--cyan); }
.px-7  { color: var(--red); }
.px-8  { color: var(--violet); }
.px-9  { color: var(--rule-bright); }
.px-10 { color: #b4f00c; }   /* brand */
.px-11 { color: #8fbf0a; }
.px-12 { color: #d4ff5c; }

/* ---- cold start ---------------------------------------------------------
   The logo arrives the way a CRT settles: torn, mis-registered and noisy, with
   a real progress bar underneath, and only then does it lock. Purely cosmetic —
   it is skippable, and reduced-motion goes straight to the settled state.
   ------------------------------------------------------------------------ */

.sh__boot {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4) var(--s-5);
}

.sh__bootart {
  white-space: pre;
  line-height: 0.82;
  font-size: clamp(6px, 1.05vw, 9px);
  position: relative;
  filter: drop-shadow(0 0 10px rgba(180, 240, 12, 0.25));
}

.sh__boot[data-phase="settling"] .sh__bootart {
  animation: boot-settle 420ms var(--ease-out);
}

@keyframes boot-settle {
  0%   { filter: drop-shadow(0 0 26px rgba(180, 240, 12, 0.85)) brightness(1.9); }
  100% { filter: drop-shadow(0 0 10px rgba(180, 240, 12, 0.25)) brightness(1); }
}

.sh__meter {
  width: min(280px, 80%);
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.sh__bar {
  font-size: var(--t-sm);
  color: var(--phos);
  letter-spacing: 0.04em;
  white-space: pre;
  text-align: center;
}

.sh__stage {
  font-size: var(--t-xs);
  color: var(--txt-3);
  text-align: center;
  min-height: 1.4em;
  letter-spacing: 0.04em;
}

.sh__skip {
  font-size: var(--t-xs);
  color: var(--txt-3);
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  padding: 3px var(--s-3);
}

.sh__skip:hover { color: var(--phos); border-color: var(--rule-hot); }

@media (prefers-reduced-motion: reduce) {
  .sh__boot[data-phase="settling"] .sh__bootart { animation: none; }
}

/* The prompt is withheld until the cold start finishes, so nothing can be typed
   into a terminal that has not booted yet. */
.sh__form[hidden] { display: none; }