/* ════════════════════════════════════════════════════════════════
   23-Terminal — וייב קוד ניוז · טרמינל
   Black-green terminal. Command-based navigation ONLY.
   Palette: pure black, phosphor green, amber accent, red for errors.
   LTR (terminal is universal). Monospace everywhere.
   ════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Backgrounds */
  --bg-screen: #000000;            /* pure black */
  --bg-scan: rgba(0, 217, 122, 0.02);

  /* Phosphor palette */
  --phosphor:    #00d97a;          /* primary phosphor green */
  --phosphor-d:  #00b25e;          /* dimmer green */
  --phosphor-dd: #007a3f;          /* dim green */
  --phosphor-x:  #003a1f;          /* very dim, for chrome */

  /* Amber */
  --amber:       #ffb000;          /* amber accent */
  --amber-d:     #cc8a00;
  --amber-dd:    #4d3400;

  /* Red for errors */
  --err:         #ff5b5b;
  --err-d:       #cc3333;

  /* Highlights */
  --hi-cyan:     #66ffe2;          /* meta info */
  --hi-purple:   #b88dff;          /* quote / accent */
  --hi-yellow:   #ffe066;          /* warnings */

  /* Text */
  --ink:         #c8ffd9;          /* main text (slightly tinted) */
  --ink-soft:    #6fa882;          /* softer text */
  --ink-dim:     #3a6048;          /* dim text */
  --ink-mute:    #1e3a28;          /* very dim */

  /* Lines */
  --line:        rgba(0, 217, 122, 0.22);
  --line-soft:   rgba(0, 217, 122, 0.10);

  /* Fonts */
  --font-mono:   'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  --font-ui:     'JetBrains Mono', monospace;

  /* Sizes */
  --term-radius: 0px;              /* terminal is a fullscreen rect */
  --titlebar-h:  30px;
  --prompt-h:    36px;
  --header-pad:  18px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: var(--font-mono);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
html {
  background: var(--bg-screen);
  color-scheme: dark;
}
body {
  background: var(--bg-screen);
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: text;
  -webkit-user-select: text;
  /* direction is LTR — terminal is universal */
  direction: ltr;
  text-align: left;
}

/* LTR override on body for terminal pages */
body[data-page="index"],
body[data-page="article"],
body[data-page="news"] {
  direction: ltr;
  text-align: left;
}

/* Hebrew text in output still renders correctly because JetBrains Mono
   supports Hebrew glyphs and the inline `dir="auto"` on Hebrew text spans
   will re-flip individual lines as needed. The terminal chrome itself
   stays LTR. */

/* ─── Terminal Frame (full viewport) ─── */
.terminal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 217, 122, 0.04) 0%, transparent 60%),
    var(--bg-screen);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  overflow: hidden;
}

/* Subtle CRT scanline overlay (via repeating gradient) */
.terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0) 0px,
    rgba(0, 0, 0, 0.0) 2px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* Subtle screen vignette (a soft glow on edges) */
.terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 101;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.55;
}

/* ─── Title bar (non-interactive chrome) ─── */
.term-titlebar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  height: var(--titlebar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(0, 30, 15, 0.85);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phosphor-d);
  gap: 16px;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.term-titlebar-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.term-titlebar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--phosphor-xx, var(--ink-mute));
  box-shadow: 0 0 0 1px rgba(0, 217, 122, 0.20) inset;
}
.term-titlebar-dot.live { background: var(--phosphor); box-shadow: 0 0 6px rgba(0, 217, 122, 0.6); }
.term-titlebar-dot.warn { background: var(--amber); }
.term-titlebar-dot.alt  { background: var(--err); }

.term-titlebar-name {
  font-weight: 700;
  color: var(--phosphor);
  letter-spacing: 0.10em;
  text-shadow: 0 0 6px rgba(0, 217, 122, 0.35);
}

.term-titlebar-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
}

.term-titlebar-meta {
  display: flex;
  gap: 16px;
  color: var(--phosphor-d);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.term-titlebar-meta b { color: var(--amber); font-weight: 700; }

.term-titlebar-status {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--phosphor-d);
}
.term-titlebar-status .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 8px rgba(0, 217, 122, 0.7);
  animation: live-pulse 1.6s infinite ease-in-out;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ─── Output (scrollable region) ─── */
.term-output {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 8px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-dd) var(--bg-screen);
}

.term-output::-webkit-scrollbar { width: 8px; }
.term-output::-webkit-scrollbar-track { background: var(--bg-screen); }
.term-output::-webkit-scrollbar-thumb {
  background: var(--phosphor-x);
  border-radius: 4px;
}
.term-output::-webkit-scrollbar-thumb:hover { background: var(--phosphor-dd); }

/* ─── Output line primitives ─── */
.line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 0;
  min-height: 1.55em;
}

.line.ascii {
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(0, 217, 122, 0.3);
  font-weight: 600;
}

.line.muted { color: var(--ink-soft); }
.line.dim   { color: var(--ink-dim); }
.line.amber { color: var(--amber); }
.line.err   { color: var(--err); text-shadow: 0 0 4px rgba(255, 91, 91, 0.35); }
.line.hi    { color: var(--phosphor); }
.line.cyan  { color: var(--hi-cyan); }
.line.purple{ color: var(--hi-purple); }
.line.warn  { color: var(--hi-yellow); }

.line.motd-title { color: var(--amber); font-weight: 700; letter-spacing: 0.04em; }
.line.motd-key   { color: var(--phosphor-d); }
.line.motd-val   { color: var(--ink); }
.line.motd-tag   { color: var(--hi-purple); }
.line.motd-cmd   { color: var(--phosphor); font-weight: 600; }
.line.motd-cmd b { color: var(--amber); font-weight: 700; }

.line.section-rule {
  color: var(--phosphor-dd);
  letter-spacing: 0;
}

.line.prompt {
  color: var(--phosphor);
}
.line.prompt .who  { color: var(--amber); font-weight: 700; }
.line.prompt .at   { color: var(--phosphor-d); }
.line.prompt .host { color: var(--phosphor); font-weight: 700; text-shadow: 0 0 4px rgba(0, 217, 122, 0.3); }
.line.prompt .path { color: var(--hi-cyan); }
.line.prompt .sym  { color: var(--amber); font-weight: 700; }

.line.echo .echo-prompt { color: var(--phosphor); }
.line.echo .echo-cmd    { color: var(--ink); }

.line.list-row {
  display: block;
  padding: 1px 0;
}
.line.list-row .list-num   { color: var(--amber); font-weight: 700; min-width: 3ch; display: inline-block; }
.line.list-row .list-cat   { color: var(--hi-purple); font-weight: 600; min-width: 14ch; display: inline-block; }
.line.list-row .list-title { color: var(--ink); }
.line.list-row .list-meta  { color: var(--ink-dim); font-size: 12.5px; }

.line.article-header { color: var(--amber); font-weight: 700; letter-spacing: 0.04em; margin-top: 4px; }
.line.article-meta   { color: var(--ink-soft); font-size: 12.5px; }
.line.article-title  { color: var(--phosphor); font-weight: 700; font-size: 15px; line-height: 1.45; text-shadow: 0 0 4px rgba(0, 217, 122, 0.3); }
.line.article-excerpt{ color: var(--ink); }
.line.article-p      { color: var(--ink); padding: 4px 0; }
.line.article-tag    { color: var(--hi-purple); }
.line.article-tldr   { color: var(--amber); }

.line.chat-header {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.line.chat-meta { color: var(--ink-soft); font-size: 12.5px; }
.line.chat-msg  { padding: 1px 0; color: var(--ink); }
.line.chat-msg.urgent { color: var(--hi-yellow); }
.line.chat-msg .chat-time { color: var(--ink-dim); }
.line.chat-msg .chat-tag  { color: var(--hi-purple); font-weight: 700; }
.line.chat-msg .chat-urgent-tag { color: var(--err); font-weight: 700; letter-spacing: 0.06em; }
.line.chat-msg .chat-actor { color: var(--amber); }

.line.skin-hint { color: var(--ink-soft); font-size: 12.5px; }
.line.skin-active { color: var(--amber); font-weight: 700; }

.line.saved-empty { color: var(--ink-dim); }

/* Cursor animation for the live typing line */
.line.cursor-line::after {
  content: '▌';
  color: var(--phosphor);
  animation: cursor-blink 1.1s steps(2, start) infinite;
  margin-inline-start: 1px;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Section dividers using terminal characters */
.line.rule { color: var(--phosphor-dd); }
.line.rule.heavy { color: var(--phosphor-d); font-weight: 700; }

/* Inline keyboard hints */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--amber);
  border: 1px solid var(--amber-dd);
  background: rgba(255, 176, 0, 0.06);
  padding: 0 5px;
  border-radius: 3px;
  margin: 0 2px;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

a.inline-link {
  color: var(--hi-cyan);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* ─── Prompt / Input bar (bottom) ─── */
.term-prompt-row {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 8px 20px 12px 20px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  min-height: var(--prompt-h);
  gap: 8px;
}

.term-prompt-row .prompt-user { color: var(--amber); font-weight: 700; }
.term-prompt-row .prompt-at   { color: var(--phosphor-d); }
.term-prompt-row .prompt-host { color: var(--phosphor); font-weight: 700; text-shadow: 0 0 4px rgba(0, 217, 122, 0.3); }
.term-prompt-row .prompt-colon{ color: var(--phosphor-d); }
.term-prompt-row .prompt-path { color: var(--hi-cyan); }
.term-prompt-row .prompt-sig  { color: var(--amber); font-weight: 700; margin-inline-start: 6px; }

.term-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  caret-color: var(--phosphor);
  padding: 4px 2px;
  margin-inline-start: 4px;
  letter-spacing: 0.01em;
}
.term-input::placeholder { color: var(--ink-dim); }
.term-input:focus::placeholder { color: transparent; }

/* Blinking cursor (drawn via input caret + a span overlay) */
.term-prompt-row .cursor {
  width: 8px;
  height: 1.05em;
  background: var(--phosphor);
  box-shadow: 0 0 6px rgba(0, 217, 122, 0.6);
  margin-inline-start: 2px;
  animation: cursor-blink 1.05s steps(2, start) infinite;
  flex-shrink: 0;
}

/* ─── Mobile / narrow ─── */
@media (max-width: 640px) {
  .term-titlebar { font-size: 10px; padding: 0 10px; gap: 8px; }
  .term-titlebar-meta { display: none; }
  .term-output { padding: 10px 12px 6px 12px; font-size: 12.5px; }
  .term-prompt-row { padding: 8px 12px 10px 12px; font-size: 12.5px; }
  .line.list-row .list-cat { min-width: 11ch; }
  .line.list-row .list-meta { display: block; padding-inline-start: 4ch; }
}

@media (max-width: 380px) {
  .term-output { font-size: 11.5px; }
  .term-prompt-row { font-size: 12px; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .term-titlebar-status .live-dot,
  .line.cursor-line::after,
  .term-prompt-row .cursor,
  .chat-head-status .dot {
    animation: none !important;
  }
}

/* ─── Print: just show output text, hide chrome ─── */
@media print {
  .term-titlebar, .term-prompt-row { display: none; }
  .terminal { position: static; }
  .term-output { overflow: visible; }
}