/* ─────────────────────────────────────────────────
   terminal.css
   Terminal-specific styles: output area, line types,
   input row, prompt, and cursor animation.
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   OUTPUT AREA
───────────────────────────────────────────────── */

#terminal-output {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: var(--spacing-md);
  /* Hide scrollbar on all browsers — terminal should scroll
     without showing a visible scrollbar track */
  scrollbar-width: none;
}

#terminal-output::-webkit-scrollbar {
  display: none;
}

#terminal-container {
  overflow: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────
   TERMINAL LINE — BASE
───────────────────────────────────────────────── */

.terminal-line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ─────────────────────────────────────────────────
   PROFILE ROW — CSS GRID LAYOUT
   Replaces space-based column alignment in the
   profile block. Label column is fixed-width;
   value column fills remaining space and wraps
   cleanly at any viewport width.
───────────────────────────────────────────────── */

.profile-row {
  display: grid;
  grid-template-columns: 9ch 1fr;
  gap: 0 1.5rem;
  line-height: 1.8;
}

.profile-label {
  color: var(--color-muted, #666666);
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
}

.profile-value {
  color: var(--color-text, #ffffff);
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
}

/* ─────────────────────────────────────────────────
   HELP ROW — CSS GRID LAYOUT
   Aligns command-description pairs in the /help
   output. Command column is fixed-width; description
   fills remaining space and wraps cleanly at any
   viewport width.
───────────────────────────────────────────────── */

.help-row {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: 0 1rem;
  line-height: 1.8;
  padding: 0 0.5rem;
}

.help-command {
  color: var(--color-text, #ffffff);
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
}

.help-description {
  color: var(--color-muted, #666666);
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
}

/* ─────────────────────────────────────────────────
   TERMINAL LINE — VARIANTS
───────────────────────────────────────────────── */

/* Boot sequence system messages */
.terminal-line--system {
  color: var(--color-muted);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Profile block info rows */
.terminal-line--profile {
  color: var(--color-text);
}

/* Horizontal separator lines — truncate at container edge
   rather than wrapping the em-dashes onto a second line */
.terminal-line--separator {
  color: var(--color-muted);
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

/* Tagline quote */
.terminal-line--tagline {
  color: var(--color-text);
  font-style: italic;
}

/* Echo of user's typed input */
.terminal-line--user {
  color: var(--color-text);
}

/* Command output body */
.terminal-line--output {
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* /work detail lines — indented sub-content with hanging indent
   so wrapped lines align to the indent position, not column 0 */
.terminal-line--work-detail {
  display: block;
  color: var(--color-text, #ffffff);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  padding-left: 7ch;
  text-indent: -7ch;
}

/* KV ROW — CSS GRID LAYOUT
   Label-value pairs inside command output. Label column is
   fixed-width; value column fills remaining space and wraps
   cleanly at any viewport width. */
.terminal-line--kv {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: 0 1rem;
  line-height: 1.8;
  max-width: 100%;
}

.terminal-line--kv .kv-label {
  color: var(--color-muted, #666666);
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
}

.terminal-line--kv .kv-value {
  color: var(--color-text, #ffffff);
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
}

/* Error and unrecognised command messages */
.terminal-line--error {
  color: var(--color-muted);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Empty spacer — preserves vertical rhythm */
.terminal-line--empty {
  color: transparent;
  user-select: none;
  line-height: 1;
  min-height: 0.75em;
  display: block;
}

/* ─────────────────────────────────────────────────
   INPUT ROW
───────────────────────────────────────────────── */

#terminal-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: var(--input-row-height);
  /* Account for iOS safe area so input stays above the home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--color-input-border);
  flex-shrink: 0;
}

.prompt-symbol {
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  user-select: none;
  flex-shrink: 0;
}

#terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  caret-color: var(--color-text);
  /* Prevent iOS from adding rounded corners or shadows */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

#terminal-input::placeholder {
  color: transparent;
}

#terminal-input:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────
   BLINKING CURSOR
   Displayed in the input row after the boot sequence
   completes, as a visual indicator the terminal is
   ready. Removed on first keystroke.
───────────────────────────────────────────────── */

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background-color: var(--color-text);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor-blink var(--cursor-blink-speed) step-end infinite;
}

/* When the cursor sits inside the flex input row,
   vertical-align has no effect — alignment is
   handled by the parent's align-items: center.
   Reset the inline margin so gap provides spacing. */
#terminal-input-row .terminal-cursor {
  margin-left: 0;
  align-self: center;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─────────────────────────────────────────────────
   MOBILE OVERFLOW GUARD
   Explicitly clip horizontal overflow on narrow
   viewports to prevent long lines or separators
   from causing a horizontal scrollbar.
───────────────────────────────────────────────── */

@media (max-width: 480px) {
  .help-row {
    grid-template-columns: 13ch 1fr;
    gap: 0 0.5rem;
    font-size: 11px;
  }

  #terminal-container {
    overflow: hidden;
    max-width: 100vw;
  }

  #terminal-output,
  #terminal-input-row {
    overflow-x: hidden;
  }

  #terminal-output {
    width: 100%;
    max-width: 100%;
  }

  .terminal-line--kv {
    gap: 0 0.75rem;
  }
}

@media (max-width: 359px) {

  #terminal-container {
    --font-size-base: clamp(8px, 2.5vw, 10px);
  }

  .terminal-line {
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .terminal-line--kv {
    display: block;
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .terminal-line--kv .kv-label {
    display: inline;
    color: var(--color-muted, #666666);
    margin-right: 0.5rem;
    white-space: nowrap;
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .terminal-line--kv .kv-value {
    display: inline;
    color: var(--color-text, #ffffff);
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .profile-row {
    display: grid;
    grid-template-columns: 7ch 1fr;
    gap: 0 0.5rem;
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .help-row {
    display: grid;
    grid-template-columns: 13ch 1fr;
    gap: 0 0.5rem;
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .help-row .help-command {
    white-space: nowrap;
    overflow: hidden;
  }

  .help-row .help-description {
    word-break: break-word;
    overflow-wrap: break-word;
  }

}