/* =====================================================================
   💻 Terminal App
   The one window in Retrium OS allowed to be a wall of text, so everything
   here is tuned for density and for a single shared character grid rather
   than for chrome.
   ===================================================================== */

/* The window chrome behind the terminal is dark, so the few pixels .content
   cannot cover are dark too rather than a pale strip of var(--panel). */
#terminal.window {
  background: #1a1a1a;
}

/* This element carries both `content` and `terminal-content`, so it is styled
   once here rather than split across two rules that fight on specificity.

   36px, not the 30px this used to carry: subtracting too little pushed
   .content past the window's clipped edge and ate the bottom of the input row.
   This window reached the right number first, by hitting the bug from the side
   where it shows; css/main.css now pins the title bar to that same 36px and
   subtracts it in the shared rule, so the two agree exactly and this override
   is left only for the flex column and the padding. */
#terminal .content {
  /* Declared once and inherited by every line, every <pre> and the live
     prompt. `.prompt-cursor` and the help columns are measured in `ch`, which
     only lands on the grid while all of them agree on one size — this used to
     be four separate `font-size: 20px` declarations with three of them
     restated on mobile. The phone block at the bottom re-points these two and
     needs no other override. */
  --terminal-font-size: 20px;
  --terminal-pad: 10px;

  display: flex;
  flex-direction: column;
  padding: 0;
  height: calc(100% - 36px);
  overflow: hidden;
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: "VT323", monospace;
  font-size: var(--terminal-font-size);
  /* 1.25 rather than a prettier 1.3 because it lands on a whole pixel at both
     sizes — 25px at 20px, 20px at 16px — so the scrollback keeps an integer
     baseline grid. */
  line-height: 1.25;
  cursor: text;
  box-sizing: border-box;
}

/* The scrollback and the live prompt are one stream: the prompt is the last
   child of this element rather than a footer beside it, so output and the line
   being typed scroll together the way a real shell does.

   Deliberately no longer a flex column. It was one, and because
   `.terminal-line` defaults to `flex-shrink: 1` every multi-line result was
   squeezed down to `min-height` the moment a session outgrew the window, and
   its text overprinted the lines below it. Block flow cannot do that. */
.terminal-output {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--terminal-pad);
  overflow-y: auto;
  /* Reserved always, so the first scrollbar of a session does not shift the
     character grid sideways underneath whatever has already been printed. */
  scrollbar-gutter: stable;
  overflow-wrap: break-word;
  background: #1a1a1a;
  color: #e0e0e0;
}

.terminal-output::-webkit-scrollbar {
  width: 8px;
}
/* Transparent rather than the pale strip this used to draw: a gutter that is
   always reserved should read as more right padding, not as an empty rail. */
.terminal-output::-webkit-scrollbar-track {
  background: transparent;
}
/* Square thumb: an 8px pill is the one modern shape this app would otherwise
   have. */
.terminal-output::-webkit-scrollbar-thumb {
  background: #555;
}
.terminal-output::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* One printed line of the stream. No font-size and no line-height of its own,
   so the echoed command, its result and the live prompt all share one grid. */
.terminal-line {
  margin: 0;
  padding: 0;
  min-height: 1.25em;
}

/* Colour carries the hierarchy, not weight. Every one of these used to also
   set `font-weight: bold`, which VT323 has no weight for — the browser
   synthesised one and smeared the prompt, which is the same reason the
   Messages thread rows carry no weight either. */
.terminal-prompt {
  color: #e0e0e0;
}
.terminal-path {
  color: #68a0f0;
}
.terminal-user {
  color: #e5c07b;
}
.terminal-info {
  color: #c678dd;
}
.terminal-command {
  color: #6aff00;
}
.terminal-boot {
  color: #6aff00;
}
.terminal-command-text {
  color: #e0e0e0;
}
/* The OS's own red, the one on every window's close button, rather than the
   pure #ff0015 this used to be: that value belonged to no other palette in
   Retrium OS and vibrated against #1a1a1a. */
.terminal-error {
  color: #ff5f57;
}
.terminal-directory {
  color: #56b6c2;
}
.terminal-file {
  color: #e0e0e0;
}

/* The live prompt, and the last child of the scrollback rather than a footer
   under it. It carries `.terminal-line` too, so it is literally another line
   of the stream. Flex only so the field can take the rest of the row; the
   spans inside are the same spans appendPromptLine() echoes, in the same
   order, so the caret starts at exactly the column an echoed command does. */
.terminal-input-line {
  display: flex;
}

/* 1ch is exactly one character at whatever size the current breakpoint uses.
   Both the live prompt and every echoed one carry this, so the gap after `$`
   cannot differ between them — a trailing space inside the span could not do
   that job, because it collapses in the flex row and survives in the block. */
.prompt-cursor {
  margin-right: 1ch;
}

/* An inline prompt, not a form field: no border, no background, no focus ring.
   css/matrix.css excludes this class from its generic input styling for the
   same reason. A zero flex-basis keeps it on the prompt's own row at any
   length, so a long command scrolls inside the field instead of wrapping the
   row and carrying the caret out of the window. */
.terminal-input {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: none;
  color: #6aff00;
  font: inherit;
  outline: none;
  margin: 0;
  padding: 0;
}

/* Only the focused state needs a caret colour, because that is the only state
   that draws one. */
.terminal-input:focus {
  outline: none;
  box-shadow: none;
  caret-color: #00ff1e;
}

/* `font: inherit` is what puts printed results on the same 1.25 grid as the
   prompt above them. Without it a <pre> brings the UA's own monospace, and
   this file used to hand it back 20px at 1.4 while every prompt line ran at
   1.2 — one stream with two different leadings. */
.terminal-output pre {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
}

.terminal-output a {
  color: #68a0f0;
  text-decoration: none;
}
.terminal-output a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   help
   The one result that is laid out rather than printed, because a flat
   `<pre>` cannot hang-indent and every wrapped description used to run
   back under the command names.
   --------------------------------------------------------------------- */

.terminal-help {
  white-space: pre-wrap;
}

/* 12ch is the description column: two spaces of indent, the longest command
   name (8), then a two-space gap. formatHelpRow() in js/apps/terminal.js pads
   to the same 12, and the two have to stay in step. The negative text-indent
   cancels the padding for the first line only, so a description too long for
   the window wraps back under itself — which is most of them on a phone. */
.terminal-help-row {
  padding-left: 12ch;
  text-indent: -12ch;
}

/* One blank line before a group label, before the closing note, and before a
   manual's Usage block. A margin rather than a printed empty row, so nothing
   in the listing depends on where the line breaks fall. */
.terminal-help-group,
.terminal-help-note,
.terminal-help-spaced {
  margin-top: 1em;
}
.terminal-help-group:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   matrix rain
   --------------------------------------------------------------------- */

/* A block in the stream directly above the live prompt rather than a layer
   over it, so the rain can neither cover the line being typed nor push it out
   of the window. The negative margins spend the scrollback's own padding so it
   still bleeds to the window edges, and js/apps/terminal.js sizes the bitmap
   to this box 1:1 — it used to measure the padding box and draw that into the
   smaller content box, which squashed every column. */
.terminal-matrix-canvas {
  display: block;
  margin: calc(var(--terminal-pad) * -1) calc(var(--terminal-pad) * -1) 0;
}

/* =====================================================================
     Responsive Adjustments for Mobile
     ===================================================================== */
@media (max-width: 600px) {
  /* The top matters as much as the height here. #terminal carries top: 150px
     from css/main.css and nothing was restating it at this width, so a 380px
     window started at 150 and ended at 530 with the dock's top edge at 468 —
     62px of shell behind the dock. That is not a cosmetic overlap: the prompt
     row is the last child of the scrollback rather than a footer, so as soon as
     a session fills the window the line you type on is the line under the dock.
     elementFromPoint at the input returned a dock icon, and tapping to focus the
     shell opened an app instead. It is also the window the two secret commands
     are typed into.

     min() rather than a flat 380 so a shorter phone shortens the window instead
     of pushing it back down under the dock: 130px is the 50px top plus the 80px
     the mobile dock stands off the bottom. */
  #terminal {
    top: 50px !important;
    height: min(380px, calc(100vh - 130px)) !important;

    width: 94% !important;
  }

  /* Two custom properties instead of the three separate font-size overrides
     this used to need. The prompt gap, the help columns and the rain's bleed
     are all measured against them, so they follow on their own. */
  #terminal .content {
    --terminal-font-size: 16px;
    --terminal-pad: 8px;
  }
}