.shell {
  position: relative;
  z-index: 60;
  margin: 0 -24px 0px;
  padding: 0 24px 16px;
  font-size: 13px;
  line-height: 1.7;
  border-bottom: 1px dashed var(--line);
}

@media (max-width: 720px) {
  .shell { margin: 0 -16px 16px; padding: 0 16px 12px; }
}

/* Boot loader. The shell keeps the page paint contained while the
   boot sequence runs. Only the shell block is visible during boot;
   the rest of the page is hidden via body.is-booting. The shell
   script removes the class once the sequence completes. The
   <noscript> override in base.html.twig reveals the page when JS is
   disabled; the inline 5 s fallback in the body tag protects
   against a broken shell.js. */
body.is-booting .skip,
body.is-booting main,
body.is-booting footer,
body.is-booting .site-header,
body.is-booting .shell__form { display: none; }

body.is-booting .shell {
  border-bottom: none;
  padding-bottom: 32px;
  min-height: 60vh;
}

/* Boot lines slide up and fade out before the welcome block prints.
   The JS adds the `.shell__boot-line--exit` class to trigger the
   keyframe; the lines are removed from the DOM after the animation
   completes (400 ms). The whole stage frees up the output area so the
   welcome block lands in the same vertical region. */
@keyframes shellBootExit {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}
.shell__boot-line {
  /* No special default styling — inherits the shell__line baselines. */
}
.shell__boot-line--exit {
  animation: shellBootExit 0.4s ease forwards;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .shell__boot-line--exit { animation: none; opacity: 0; }
}

.shell__line { display: flex; flex-wrap: wrap; gap: 0; white-space: pre-wrap; }
.shell__line--out { color: var(--fg); }
.shell__line--err { color: var(--err); }
.shell__line--info { color: var(--dim); }
.shell__line--accent { color: var(--accent); }
.shell__line--prompt { color: var(--dim); }

.shell__form {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--fg);
}

.shell__prompt { color: var(--fg); white-space: nowrap; flex-shrink: 0; }
.shell__prompt .host { color: var(--accent); }
.shell__prompt .path { color: var(--fg); }
.shell__prompt .dollar { color: var(--fg); }

.shell__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--bright);
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin: 0;
  caret-color: var(--accent);
}
.shell__input::placeholder { color: var(--dim); font-style: italic; }

.shell__table { width: 100%; border-collapse: collapse; margin: 4px 0; color: var(--fg); }
.shell__table td { padding: 1px 12px 1px 0; vertical-align: top; }
.shell__table td:first-child { color: var(--accent); white-space: nowrap; }
.shell__table td:last-child { color: var(--dim); padding-right: 0; }
.shell__table code { color: var(--bright); background: transparent; padding: 0; font: inherit; }