/* the terminal is always night: a window into a shell, beside the scene */
.terminal {
  --term-bg: #06101c; --term-ink: #d7e3ee; --term-muted: #7f97ab; --term-line: rgba(215, 227, 238, 0.14);
  font-family: var(--mono); font-size: 0.92rem; line-height: 1.5; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; height: 100dvh; position: sticky; top: 0;
  padding: 0 var(--gutter) 0 clamp(1.25rem, 7vw, 7.5rem);
  background: var(--term-bg); color: var(--term-ink);
  scrollbar-color: var(--term-muted) transparent;
}
.terminal[hidden] { display: none; }
.terminal ::selection { background: var(--blue); color: var(--term-bg); }
.terminal a { text-decoration-color: color-mix(in oklab, var(--term-ink) 45%, transparent); }
.terminal a:hover { text-decoration-color: var(--accent); }
.terminal :focus-visible { outline-color: var(--blue); }

.term__topbar { display: flex; justify-content: space-between; align-items: center; height: 4.5rem; color: var(--term-muted); border-bottom: 1px solid var(--term-line); }
.term__close { background: none; border: 1px solid var(--term-line); color: var(--term-ink); padding: 0.35rem 0.9rem; min-height: 44px; cursor: pointer; font: inherit; transition: border-color 250ms ease; }
.term__close:hover { border-color: var(--accent); }

.term__output { overflow-y: auto; padding: 0.8rem 0 1rem; scrollbar-width: thin; overscroll-behavior: contain; }
.term__line { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; unicode-bidi: plaintext; }
.term__para { max-width: 72ch; }
.term__group { margin-top: 0.6rem; }
.term__group:first-child { margin-top: 0; }
.term__key { font-weight: 700; }
.term__user { color: var(--blue); }
.term__cwd { color: var(--accent); }
.term__ps1 { color: var(--term-muted); }
.term__muted, .term__cmd-desc { color: var(--term-muted); }
.term__dir { color: var(--blue); }
.term__err { color: var(--night-err); }
.term__ok { color: var(--night-ok); }
.term__hint { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.term__cmd { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.2em; cursor: pointer; transition: text-decoration-color 250ms ease; }
.term__cmd:hover { text-decoration-color: var(--accent); }
.term__tree, .term__long { white-space: pre; line-height: 1.3; overflow-x: auto; scrollbar-width: none; }
.term__ls { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--col, 12) * 1ch)); justify-items: start; }
/* LS_COLORS in the AZO palette: directories bold blue, pictures pink, links cyan, the pdf orange */
.term__k-dir { color: var(--blue); font-weight: 700; }
.term__k-image { color: #ff8a99; }
.term__k-url { color: #7fdcef; }
.term__k-pdf { color: var(--accent); }

/* files, each the way its own tool would print it */
.term__doc { margin: 0.3rem 0 0.8rem; }
.term__doc p { font: inherit; letter-spacing: normal; max-width: none; }
.term__md { max-width: 72ch; }
.term__md-h1 { color: var(--accent); font-weight: 700; padding-bottom: 0.25rem; margin: 0.4rem 0 0.7rem; border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); }
.term__md-h2 { color: var(--blue); font-weight: 700; margin: 0.9rem 0 0.2rem; }
.term__md-h2::before { content: "## "; color: var(--term-muted); font-weight: 400; }
.term__md-p { margin: 0 0 0.7rem; }
.term__md-li { padding-left: 2ch; text-indent: -2ch; margin: 0 0 0.2rem; }
.term__md-li::before { content: "• "; color: var(--accent); }
.term__code { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__syn-kw { color: var(--accent); }
.term__syn-key { color: var(--blue); font-weight: 700; }
.term__syn-field { color: var(--blue); }
.term__syn-str { color: var(--night-ok); }
.term__syn-str a { color: inherit; }
.term__mail { max-width: 72ch; }
.term__mail-head { padding-bottom: 0.5rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--term-line); }
.term__img-open { display: block; padding: 0; border: 1px solid var(--term-line); background: none; cursor: zoom-in; width: min(100%, 26rem); transition: border-color 250ms ease; }
.term__img-open:hover { border-color: var(--accent); }
.term__img-open img { display: block; width: 100%; height: auto; }
.term__img p { margin-top: 0.35rem; white-space: pre-wrap; }
.term__img-cap { color: var(--term-ink); }
.term__row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 1.2rem; padding-left: 1.2rem; }
.term__banner { font: inherit; line-height: 1.15; font-size: 0.82em; color: var(--blue); margin: 0.5rem 0; white-space: pre; width: max-content; max-width: 100%; }
.term__fetch { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 2rem; align-items: start; margin: 0.4rem 0; }
.term__fetch .term__banner { margin: 0; }
.term__swatches { display: flex; gap: 0.35rem; margin-top: 0.6rem; }
.term__swatches span { display: block; width: 1.2em; height: 1.2em; background: var(--c); }

/* the prompt: a real input, invisible, over a mirrored line with a block cursor */
/* the prompt flows like one terminal line: the path, then whatever is typed, wrapping wherever it must */
.term__prompt { position: relative; display: block; padding: 0.8rem 0 1.5rem; border-top: 1px solid var(--term-line); overflow-wrap: anywhere; }
.term__prompt:focus-within { border-top-color: var(--accent); }
.term__prompt > .term__ps1::after { content: " "; }
.term__edit { display: inline; white-space: pre-wrap; }
.term__cursor { display: inline-block; min-width: 0.62em; background: var(--blue); color: var(--term-bg); animation: term-blink 1.1s step-end infinite; }
.term__prompt.is-typing .term__cursor { animation: none; }
.term__prompt:not(:focus-within) .term__cursor { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--blue); animation: none; }
.term__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; color: transparent; background: transparent; border: 0; outline: none; caret-color: transparent; font: inherit; font-size: max(1em, 16px); }
@keyframes term-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.term__form { display: grid; gap: 0.5rem; max-width: 34rem; margin: 0.6rem 0 1rem; }
.term__field { background: transparent; border: 1px solid var(--term-line); padding: 0.5rem 0.7rem; font: inherit; color: inherit; }
.term__field::placeholder { color: var(--term-muted); }
.term__field:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.term__send { justify-self: start; background: var(--term-ink); color: var(--term-bg); border: 0; padding: 0.5rem 0.9rem; font: inherit; cursor: pointer; }

body.terminal-open .content { visibility: hidden; }
@media (max-width: 900px) {
  .terminal { position: fixed; inset: 0; z-index: 25; padding: 0 1.25rem; height: 100dvh; font-size: 0.86rem; }
  .term__topbar { height: 3.6rem; }
  .term__prompt { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .term__fetch { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .term__title { display: none; } }
@media (prefers-reduced-motion: reduce) { .term__cursor { animation: none; } }