/*
 * css/terminal.css
 *
 * All the actual layout and component styling.
 * This file references variables from theme.css — no hardcoded colours or
 * sizes anywhere here. If theme.css hasn't loaded first, everything breaks.
 *
 * The file is organised top-to-bottom in the same order the elements appear
 * in the HTML, which makes it easy to find the styles for any element.
 */


/* ── 1. Body / Page layout ───────────────────────────────────────────── */

body {
  font-family: var(--font-mono);
  background:  var(--color-bg-page);
  color:       var(--color-text-primary);

  /*
    display: flex on the body turns it into a flex container.
    align-items: center + justify-content: center centers its single child
    (the .terminal div) both vertically and horizontally in the viewport.
    This is the modern CSS way to center something on a page — much simpler
    than the old margin: auto tricks.
  */
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
}


/* ── 2. CRT Scanlines overlay ────────────────────────────────────────── */

.scanlines {
  /*
    position: fixed pins this element to the viewport — it doesn't scroll.
    inset: 0 is shorthand for top: 0; right: 0; bottom: 0; left: 0, so it
    covers the entire screen.
    z-index: 999 puts it above everything else in the stacking order.
    pointer-events: none makes it completely invisible to mouse clicks and
    touch events — without this it would block all interaction on the page.
  */
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;

  /*
    repeating-linear-gradient creates a pattern that repeats infinitely.
    This one draws a 1px semi-transparent dark stripe every 4px — that's the
    scanline effect. The low opacity (0.07) keeps it subtle so it doesn't
    hurt readability.
  */
  background: repeating-linear-gradient(
    to bottom,
    transparent             0px,
    transparent             3px,
    rgba(0, 0, 0, 0.07)     3px,
    rgba(0, 0, 0, 0.07)     4px
  );
}


/* ── 3. Terminal window ───────────────────────────────────────────────── */

.terminal {
  width:         100%;
  max-width:     900px; /* stops the terminal from getting too wide on large monitors */
  background:    var(--color-bg-terminal);
  border-radius: var(--radius-terminal);
  border:        1px solid var(--color-border);
  box-shadow:    var(--shadow-terminal);

  /*
    display: flex + flex-direction: column makes the terminal's children
    (title bar, boot section, shell section) stack vertically.
    The shell section uses flex: 1 to fill remaining space — this only
    works because the parent is a flex container with a column direction.
  */
  display:        flex;
  flex-direction: column;

  /*
    overflow: hidden is needed because the terminal has border-radius (rounded corners).
    Without it, child elements would render outside the rounded corners and look wrong.
    This "clips" everything to the rounded shape.
  */
  overflow: hidden;
}


/* ── 4. Title bar ────────────────────────────────────────────────────── */

.titlebar {
  background:    var(--color-bg-titlebar);
  border-bottom: 1px solid var(--color-border);
  padding:       12px 18px;

  /*
    flex-direction defaults to row, so the dots, title, and spacer sit
    side by side. align-items: center vertically centers them within the bar.
  */
  display:     flex;
  align-items: center;
  gap:         10px;

  user-select: none; /* prevents the title text from being selected on double-click */
  flex-shrink: 0;    /* tells the flexbox parent not to compress this when space is tight */
}

.titlebar__dots {
  display:     flex;
  gap:         8px;
  align-items: center;
}

.dot {
  width:         13px;
  height:        13px;
  border-radius: 50%; /* 50% border-radius on a square element makes a perfect circle */
  flex-shrink:   0;
}
.dot--red    { background: var(--color-dot-red); }
.dot--yellow { background: var(--color-dot-yellow); }
.dot--green  { background: var(--color-dot-green); }

.titlebar__title {
  /*
    flex: 1 makes this element grow to fill all available horizontal space.
    Combined with text-align: center, the text appears centered in that space.
    But because the dots are on the left with nothing equal on the right,
    the "center" would actually be offset — that's what the spacer fixes.
  */
  flex:           1;
  text-align:     center;
  font-size:      var(--font-size-small);
  color:          var(--color-text-faint);
  letter-spacing: 0.5px;
}

/*
  The spacer must be the same width as the dot group so that the title's
  "center" is the true center of the bar. Without it, the title would
  visually appear shifted to the right.
*/
.titlebar__spacer {
  width: 42px;
}


/* ── 5. Boot section ─────────────────────────────────────────────────── */

.boot {
  padding:    24px var(--padding-h) 18px;
  min-height: 420px; /* reserves space so the page doesn't jump as lines appear */

  display:        flex;
  flex-direction: column;
  gap:            3px; /* small gap between boot lines, like a real terminal */

  flex-shrink: 0; /* don't shrink this section when the page is short */
}

/*
  Each boot line element gets both a base class and a colour modifier class.
  For example: class="boot__line boot__line--green"
  The base class handles shared styles (font size, line height, the initial
  opacity: 0 that the animation starts from).
  The modifier class only sets the colour.
  This BEM-inspired pattern (Block__Element--Modifier) keeps styles modular.
*/
.boot__line          { font-size: var(--font-size-base); line-height: 1.65; }
.boot__line--default { color: var(--color-text-muted); }
.boot__line--green   { color: var(--color-green); }
.boot__line--red     { color: var(--color-red); }
.boot__line--blue    { color: var(--color-blue); }


/* ── 6. Shell section ────────────────────────────────────────────────── */

.shell {
  display:        flex;
  flex-direction: column;
  flex: 1; /* grows to fill all remaining vertical space in the terminal window */
}

/*
  The HTML `hidden` attribute sets display:none by default, but some aggressive
  CSS resets override this. This rule ensures `hidden` always works regardless
  of what the reset file does.
*/
.shell[hidden] {
  display: none;
}


/* ── 7. ASCII banner ─────────────────────────────────────────────────── */

.banner {
  padding:     20px var(--padding-h) 8px;
  flex-shrink: 0;
}

.banner__art {
  font-size:   var(--font-size-banner);
  color:       var(--color-green);
  line-height: 1.25;
  /*
    overflow-x: auto adds a horizontal scrollbar only when needed.
    This lets the ASCII art scroll left/right on narrow screens instead
    of being clipped or wrapping (which would break the art completely).
  */
  overflow-x:  auto;
  white-space: pre; /* preserves all spaces and line breaks exactly as written */
}

.banner__sub {
  font-size:     var(--font-size-small);
  color:         var(--color-text-faint);
  padding:       10px 0 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  line-height:   1.6;
}

.banner__sub kbd {
  color: var(--color-blue); /* highlight the command names in the hint text */
}


/* ── 8. Output area and line colour variants ─────────────────────────── */

.output {
  flex:    1;
  padding: 14px var(--padding-h);

  /*
    max-height limits how tall the output area can grow, then overflow-y: auto
    adds a scrollbar when there's more content than fits. Without max-height,
    the output would grow forever and push the input field off the bottom.
  */
  max-height:      440px;
  overflow-y:      auto;
  scroll-behavior: smooth; /* animate scrolling instead of jumping instantly */

  display:        flex;
  flex-direction: column;
  gap:            1px; /* tiny gap between output lines for readability */
}

/*
  Every line in the output gets the base .line class plus a colour modifier.
  Example: <div class="line line--green">text here</div>

  white-space: pre-wrap preserves intentional spaces (used for indentation
  inside files) but still wraps long lines instead of overflowing.
  word-break: break-word breaks long URLs or paths that would overflow.
*/
.line {
  font-size:   var(--font-size-base);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break:  break-word;
}

/* Line colour variants — each maps to a color variable from theme.css */
.line--blank   { height: 10px; } /* an empty spacer line */
.line--default { color: var(--color-text-muted); }
.line--green   { color: var(--color-green); }
.line--blue    { color: var(--color-blue); }
.line--purple  { color: var(--color-purple); }
.line--gold    { color: var(--color-gold); }
.line--red     { color: var(--color-red); }
.line--white   { color: var(--color-white); }


/* ── 9. Prompt colours ───────────────────────────────────────────────── */

/*
  The prompt "root@oliver:~#" is built from multiple <span> elements, each
  with its own colour. These classes are shared between the live input row
  prompt and the echoed prompt printed above each command's output —
  defining them once here keeps both in sync automatically.
*/
.prompt__user   { color: var(--color-red); }
.prompt__at     { color: var(--color-text-primary); }
.prompt__host   { color: var(--color-blue); }
.prompt__sep    { color: var(--color-text-primary); }
.prompt__path   { color: var(--color-green); }
.prompt__dollar { color: var(--color-text-primary); margin: 0 6px; }

/*
  The prompt echo is the "root@oliver:~# command" line printed above
  each command's output. It's created by output.js#addPromptEcho().
  flex-wrap: wrap allows long commands to wrap onto a second line on narrow screens.
*/
.prompt-echo {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  font-size:   var(--font-size-base);
  line-height: 1.75;
  margin-top:  10px; /* visual breathing room between consecutive command blocks */
}

.prompt-echo__cmd { color: var(--color-white); }


/* ── 10. Input row ───────────────────────────────────────────────────── */

.input-row {
  display:     flex;
  align-items: center;
  padding:     10px var(--padding-h) 14px;
  border-top:  1px solid var(--color-border-subtle);
  flex-shrink: 0;
  flex-wrap:   nowrap;  /* keep prompt and input on same line */
  overflow-x:  auto;    /* allow horizontal scroll on mobile if needed */
}

.input-row__field {
  flex:      1;      /* fills all remaining width between the cursor and end */
  font-size: var(--font-size-base);
  color:     var(--color-white);
  outline:   none;   /* removes the default browser focus ring (we don't need it here) */
  white-space: nowrap; /* prevent text wrapping */

  /*
    caret-color: transparent hides the browser's built-in blinking text cursor.
    We replace it with our own custom .cursor element so we have full control
    over its size, colour, and blink animation.
  */
  caret-color: transparent;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 1px;  /* small space after cursor */
  touch-action: manipulation; /* Prevent zoom on iOS when typing */
}

@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific: prevent auto-zoom on input focus */
  .input-row__field {
    font-size: 16px;
  }
}


/* ── 11. Blinking cursor ─────────────────────────────────────────────── */

/*
  This is a plain green rectangle that blinks using a CSS animation defined
  in animations.css. It sits BEFORE the text input in the flex row (vim-style),
  so it appears at the beginning and shifts right as the user types.
*/
.cursor {
  display:        inline-block;
  width:          8px;
  height:         15px;
  background:     var(--color-green);
  vertical-align: text-bottom;
  margin-right:   0px;
  flex-shrink:    0;
  transition:     transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* monkeytype-style snappy easing */
  transform:      translateX(0px);  /* initial position */
}


/* ── 12. Clickable links inside terminal output ──────────────────────── */

/*
  When a line tuple in data/files.js has a URL as its third element,
  output.js wraps it in an <a> tag with this class.
  text-underline-offset adds space between the text and underline so
  the underline doesn't touch the bottom of descending letters like g and y.
*/
.terminal-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terminal-link:hover {
  color: var(--color-green); /* green on hover ties back to the terminal accent */
}


/* ── 13. Quick-bar button strip ──────────────────────────────────────── */

.quickbar {
  background:  var(--color-bg-terminal);
  border-top:  1px solid var(--color-bg-titlebar);
  padding:     10px 18px 14px;
  display:     flex;
  flex-wrap:   wrap; /* buttons wrap to a new row if they don't all fit in one line */
  gap:         6px;
  flex-shrink: 0;
}

.quickbar__btn {
  font-family:   var(--font-mono);
  font-size:     var(--font-size-small);
  color:         var(--color-blue);
  background:    var(--color-bg-titlebar);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding:       4px 10px;
  /*
    transition makes the colour change animate smoothly over 0.12s instead
    of switching instantly. Only the listed properties animate — background,
    color, and border-color — leaving everything else (like layout) instant.
  */
  transition:    background 0.12s, color 0.12s, border-color 0.12s;
  user-select:   none;
  -webkit-user-select: none; /* iOS Safari */
  touch-action:  manipulation; /* Prevent double-tap zoom on mobile */
}

.quickbar__btn:hover {
  background:   var(--color-bg-hover);
  color:        var(--color-green);
  border-color: var(--color-green);
}


/* ── 14. Command bubbles (shown by the `help` command) ───────────────── */

/*
  These pill-shaped buttons are injected into the output area by cmdHelp()
  in commands.js. They're clickable and fire their command when pressed,
  exactly like the quick-bar buttons above — but they live inside the output.

  border-radius: 999px creates a "pill" shape — any value larger than half
  the element's height produces fully rounded ends, so 999px is a common
  trick to get that shape without having to know the exact height.
*/
.cmd-bubble {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-mono);
  font-size:      var(--font-size-small);
  color:          var(--color-green);
  /*
    rgba() lets us set a colour with transparency — the 0.08 alpha here gives
    a very subtle green tint to the background without being too strong.
  */
  background:     rgba(133, 232, 157, 0.08);
  border:         1px solid rgba(133, 232, 157, 0.25);
  border-radius:  999px;
  padding:        3px 10px;
  margin:         2px 3px;
  cursor:         pointer;
  transition:     background 0.12s, border-color 0.12s;
  user-select:    none;
  -webkit-user-select: none; /* iOS Safari */
  vertical-align: middle;
  touch-action:   manipulation; /* Prevent double-tap zoom on mobile */
}

.cmd-bubble:hover {
  background:   rgba(133, 232, 157, 0.18);
  border-color: var(--color-green);
}


/* ── 15. Responsive overrides ────────────────────────────────────────── */

/*
  @media queries apply styles only when a condition is met — here, only when
  the screen is 600px wide or narrower (i.e. a phone).
  Styles inside override the ones above for small screens only.
*/
@media (max-width: 600px) {
  body {
    padding:     12px 8px;
    align-items: flex-start; /* pin to top of screen instead of vertical-center */
  }

  /* Scale down the ASCII art so it fits without forcing horizontal scroll */
  .banner__art {
    font-size: 7px;
  }

  /* Shorter output area to leave room for the input row and quick bar */
  .output {
    max-height: 300px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  /* Adjust line display for mobile wrapping */
  .line {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  /* Floating mobile controls */
  .floating-mobile-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }

  .floating-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-green);
    color: var(--color-bg-terminal);
    border: 2px solid var(--color-green);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .floating-btn:hover {
    background: var(--color-bg-terminal);
    color: var(--color-green);
  }
}