/* ══════════════════════════════════════════════════
   TERMINAL THEME v3.0 — Grav CMS
   SPA layout: flex terminal, AJAX content
══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap');

:root {
  --bg:          #080909;
  --bg-raised:   #0c0e0f;
  --bg-window:   #0f1112;
  --bg-titlebar: #161a1c;
  --bg-hover:    #1a1e21;
  --fg:          #c8ccd0;
  --fg-dim:      #46505e;
  --fg-muted:    #28303d;
  --accent:      #00ff88;
  --accent-dim:  #00994f;
  --accent-glow: rgba(0,255,136,.14);
  --amber:       #ffb347;
  --cyan:        #7ad7f0;
  --red:         #ff4d6a;
  --purple:      #c084fc;
  --ok:          #00ff88;
  --warn:        #ffb347;
  --err:         #ff4d6a;
  --border:      #1b1f23;
  --border-glow: rgba(0,255,136,.28);
  --font:        'JetBrains Mono', 'Fira Code', monospace;
  --glow-sm:     0 0 8px rgba(0,255,136,.42);
  --glow-md:     0 0 22px rgba(0,255,136,.22), 0 0 44px rgba(0,255,136,.09);
  --glow-lg:     0 0 40px rgba(0,255,136,.28), 0 0 80px rgba(0,255,136,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  overflow: hidden;     /* terminal window handles its own scroll */
  cursor: crosshair;
}
::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--fg-muted); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }


/* ══════════════════════════════════════════════════
   PERSISTENT NAV BAR — always visible, original ls style
══════════════════════════════════════════════════ */
.term-nav-bar {
  flex-shrink: 0;
  padding: .9rem 1.4rem .2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-window);
}

/* Original nav styles — restored from navigation partial */
.term-nav { /* no extra margin needed, bar provides padding */ }

.nav-prompt-line,
.nav-prompt-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
  font-size: .84rem;
}

.nav-output { padding: .1rem 0 .2rem .9rem; }

.nav-meta {
  display: block;
  font-size: .77rem;
  margin-bottom: .15rem;
}

.nav-list  { list-style: none; }
.nav-item  { width: 100%; font-size: .81rem; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .08rem .35rem;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: inherit;
  color: inherit;
  border-radius: 2px;
  transition: background .13s;
}
.nav-link:hover { background: var(--bg-hover); }
.nav-link:hover .nav-name { color: var(--accent); text-shadow: var(--glow-sm); }

.nav-perms { font-size: .77rem; min-width: 9.5rem; color: var(--fg-dim); }
.nav-size  { font-size: .77rem; min-width: 3.5rem; text-align: right; color: var(--fg-dim); }
.nav-name  { color: var(--fg); transition: color .13s, text-shadow .13s; }
.nav-name.accent { color: var(--accent); text-shadow: var(--glow-sm); }

.nav-item.active .nav-name { color: var(--accent); text-shadow: var(--glow-sm); }

.nav-divider {
  margin: .4rem 0 .5rem;
  font-size: .74rem;
  color: var(--fg-dim);
}

/* ══════════════════════════════════════════════════
   MATRIX + PARTICLES
══════════════════════════════════════════════════ */
#matrix-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
#particles-bg {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; opacity: .45;
}

/* ══════════════════════════════════════════════════
   CRT EFFECTS
══════════════════════════════════════════════════ */
.crt-overlay {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.035) 2px,rgba(0,0,0,.035) 4px);
  transition: opacity .08s ease;
}
.crt-vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.72) 100%);
}

/* ══════════════════════════════════════════════════
   BOOT SEQUENCE
══════════════════════════════════════════════════ */
#boot-sequence {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); display: flex; flex-direction: column;
  justify-content: center; padding: 3rem; gap: .3rem;
  transition: opacity .5s ease;
}
#boot-sequence.hidden { opacity: 0; pointer-events: none; }
.boot-line {
  font-size: .82rem; color: var(--fg-dim);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.boot-line.visible { opacity: 1; transform: translateX(0); }
.boot-line .ok     { color: var(--ok); }
.boot-line .accent { color: var(--accent); font-weight: 700; }

/* ══════════════════════════════════════════════════
   TERMINAL WRAPPER + WINDOW
   Full-viewport flex layout
══════════════════════════════════════════════════ */
#terminal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  opacity: 0;
  transition: opacity .7s ease;
}
#terminal-wrapper.visible { opacity: 1; }

/* Fullscreen override */
#terminal-wrapper.fullscreen { padding: 0; }
#terminal-wrapper.fullscreen .term-window {
  max-width: 100%; height: 100vh; border-radius: 0; border: none;
}

.term-window {
  width: 100%;
  max-width: 900px;
  height: calc(100vh - 3rem);    /* fills viewport minus padding */
  display: flex;
  flex-direction: column;
  background: var(--bg-window);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border), 0 6px 40px rgba(0,0,0,.85), var(--glow-md);
  overflow: hidden;
  transition: box-shadow .4s ease;
}
.term-window:hover {
  box-shadow: 0 0 0 1px var(--border-glow), 0 6px 50px rgba(0,0,0,.9), var(--glow-lg);
}

/* Glitch */
.term-window.glitching { animation: win-glitch .8s ease forwards; }
@keyframes win-glitch {
  0%   { filter: none; transform: none; }
  10%  { filter: hue-rotate(90deg) saturate(3); transform: translate(-2px,1px) skewX(-1deg); }
  25%  { filter: hue-rotate(-60deg); transform: translate(3px,-1px); }
  40%  { filter: hue-rotate(180deg) brightness(1.5); transform: translate(-1px,2px) skewX(1deg); }
  55%  { filter: none; transform: translate(2px,0); }
  70%  { filter: hue-rotate(270deg); transform: translate(-3px,1px); }
  100% { filter: none; transform: none; }
}

/* ── Titlebar ── */
.term-titlebar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: .52rem 1rem;
  background: var(--bg-titlebar);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.term-buttons  { display: flex; gap: 6px; }
.term-btn {
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  transition: filter .18s, transform .18s;
}
.term-btn:hover     { filter: brightness(1.5); transform: scale(1.12); }
.term-btn.close    { background: #ff5f57; box-shadow: 0 0 5px #ff5f5770; }
.term-btn.minimize { background: #febc2e; box-shadow: 0 0 5px #febc2e70; }
.term-btn.maximize { background: #28c840; box-shadow: 0 0 5px #28c84070; }
.term-title {
  flex: 1; text-align: center; font-size: .76rem;
  color: var(--fg-dim); letter-spacing: .04em;
}
.term-clock {
  font-size: .74rem; color: var(--fg-dim);
  min-width: 5rem; text-align: right; letter-spacing: .05em;
}

/* ── Body: flex column, screen scrolls, input stays pinned ── */
.term-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Scrollable output screen */
#term-screen {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.4rem .6rem;
  font-size: .86rem;
  line-height: 1.7;
}

/* Pinned input row */
.term-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--bg-window);
}

/* ══════════════════════════════════════════════════
   PROMPT
══════════════════════════════════════════════════ */
.prompt {
  display: inline-flex; align-items: center; gap: 0;
  flex-shrink: 0; white-space: nowrap; font-size: .85rem;
}
.prompt-user   { color: var(--accent); }
.prompt-host   { color: var(--cyan);   }
.prompt-path   { color: var(--amber);  }
.prompt-symbol { color: var(--fg-dim); margin-left: .2rem; margin-right: .35rem; }

/* ══════════════════════════════════════════════════
   TERMINAL INPUT FIELD
══════════════════════════════════════════════════ */
.term-input-field {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg); font-family: var(--font); font-size: .86rem;
  caret-color: var(--accent); cursor: text; padding: 0;
}
.term-input-field::placeholder { color: var(--fg-muted); font-style: italic; }

/* ══════════════════════════════════════════════════
   OUTPUT LINES
══════════════════════════════════════════════════ */
.output-line       { padding: .05rem 0; }
.output-cmd-line   { color: var(--fg-dim); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .25rem; }
.output-cmd-line .cmd-text { color: var(--fg); }
.output-error      { color: var(--err); }
.output-success    { color: var(--ok); }
.output-info       { color: var(--cyan); }
.output-warn       { color: var(--amber); }
.output-dim        { color: var(--fg-dim); }

/* ── Prompt colors (in output cmd echo) ── */
.prompt-user   { color: var(--accent); }
.prompt-host   { color: var(--cyan);   }
.prompt-path   { color: var(--amber);  }
.prompt-symbol { color: var(--fg-dim); }

/* ══════════════════════════════════════════════════
   TERMINAL PAGE BLOCKS (AJAX content)
══════════════════════════════════════════════════ */
.term-page-block {
  margin: .4rem 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.term-page-block:last-child { border-bottom: none; }

/* File header */
.file-header { font-size: .88rem; margin-bottom: .4rem; letter-spacing: .02em; }

/* Inline prompt lines */
.prompt-line {
  display: flex; align-items: center; gap: .5rem;
  margin: .25rem 0; font-size: .83rem; color: var(--fg-dim);
}
.prompt-symbol { color: var(--fg-dim); }
.cmd-text      { color: var(--fg); }

/* ── Page content (injected HTML from Grav) ── */
.page-content { padding: .35rem 0 .5rem; font-size: .87rem; line-height: 1.76; }


.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
  color: var(--accent); font-weight: 700; margin: 1.3rem 0 .4rem; letter-spacing: .02em;
}
.page-content h1::before { content: '# ';   color: var(--fg-muted); }
.page-content h2::before { content: '## ';  color: var(--fg-muted); }
.page-content h3::before { content: '### '; color: var(--fg-muted); }

.page-content p { margin-bottom: .7rem; }

.page-content a {
  color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s, text-shadow .14s;
}
.page-content a:hover { color: var(--accent); border-bottom-color: var(--accent-dim); text-shadow: var(--glow-sm); }

.page-content code {
  background: var(--bg-raised); color: var(--amber);
  padding: .12em .38em; border: 1px solid var(--border); border-radius: 2px; font-size: .9em;
}
.page-content pre {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  padding: .9rem 1.1rem .9rem 1.5rem;
  overflow-x: auto; margin: .8rem 0; position: relative;
}
.page-content pre::before {
  content: '$ '; color: var(--fg-muted);
  position: absolute; top: .9rem; left: .4rem;
}
.page-content pre code { background: none; border: none; padding: 0; color: var(--fg); font-size: .84rem; }

.page-content blockquote {
  border-left: 2px solid var(--accent-dim);
  padding: .45rem .9rem; margin: .8rem 0;
  color: var(--fg-dim); background: var(--bg-raised);
}
.page-content blockquote::before { content: '// '; color: var(--fg-muted); }

.page-content ul { list-style: none; margin: .4rem 0 .4rem .9rem; }
.page-content ul li::before { content: '→ '; color: var(--accent-dim); }
.page-content ol {
  list-style: none; counter-reset: ol; margin: .4rem 0 .4rem .9rem;
}
.page-content ol li { counter-increment: ol; }
.page-content ol li::before { content: counter(ol, decimal-leading-zero) '. '; color: var(--amber); }

.page-content table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: .8rem 0; }
.page-content th { background: var(--bg-raised); color: var(--accent); padding: .35rem .75rem; border: 1px solid var(--border); text-align: left; }
.page-content td { padding: .3rem .75rem; border: 1px solid var(--border); }
.page-content tr:hover td { background: var(--bg-hover); }

.page-content hr { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* ── Post meta ── */
.post-meta-block {
  font-size: .76rem; color: var(--fg-dim);
  display: flex; flex-wrap: wrap; gap: .2rem; align-items: center;
  margin: .2rem 0 .4rem;
}
.meta-label { color: var(--fg-muted); }
.meta-val   { color: var(--amber); }
.tag {
  color: var(--cyan); font-size: .76rem; cursor: default;
  transition: color .13s;
}
.tag:hover { color: var(--accent); }

/* ── Blog rows ── */
.blog-row {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  padding: .18rem 0; font-size: .82rem; border-bottom: 1px solid var(--border);
}
.blog-row:last-of-type { border-bottom: none; }
.nav-perms { min-width: 9.5rem; color: var(--fg-dim); font-size: .78rem; }
.nav-size  { min-width: 3rem; text-align: right; color: var(--fg-dim); font-size: .78rem; }
.post-date { color: var(--amber); min-width: 6rem; font-size: .79rem; }
.post-summary {
  width: 100%; padding-left: .5rem; font-size: .77rem;
  color: var(--fg-dim); margin-top: .05rem;
}
.comment-prefix { color: var(--fg-muted); }

/* ── Navigation buttons (clickable page names) ── */
.term-nav-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: inherit;
  padding: 0; color: var(--fg);
  transition: color .13s, text-shadow .13s;
  text-align: left;
}
.term-nav-btn:hover          { color: var(--accent); text-shadow: var(--glow-sm); }
.term-nav-btn.accent         { color: var(--accent); }
.term-nav-btn.accent:hover   { text-shadow: var(--glow-sm); }

/* ══════════════════════════════════════════════════
   COPY BUTTON
══════════════════════════════════════════════════ */
.copy-btn {
  position: absolute; top: .35rem; right: .35rem;
  background: var(--bg-raised); color: var(--fg-dim);
  border: 1px solid var(--border); font-family: var(--font);
  font-size: .7rem; padding: .12rem .38rem; cursor: pointer;
  border-radius: 2px; transition: color .13s, border-color .13s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.term-footer {
  flex-shrink: 0;
  padding: .45rem 1.4rem .55rem;
  font-size: .74rem;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}
.cli-cursor {
  color: var(--accent);
  animation: cur-blink 1.1s step-end infinite;
  text-shadow: var(--glow-sm);
}
@keyframes cur-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.link-dim {
  color: var(--fg-dim); text-decoration: none;
  border-bottom: 1px solid var(--fg-muted);
  transition: color .13s, border-color .13s;
}
.link-dim:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }
.footer-sep { color: var(--fg-muted); }

/* ══════════════════════════════════════════════════
   NOSCRIPT
══════════════════════════════════════════════════ */
.noscript-nav { padding: 2rem; font-family: sans-serif; }
.noscript-nav a { display: block; margin: .5rem 0; color: #00ff88; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html { font-size: 12px; }
  #terminal-wrapper { padding: 0; }
  .term-window { height: 100vh; border-radius: 0; border: none; }
  .nav-perms, .post-perms { display: none; }
  .blog-row { gap: .5rem; }
}

/* ══════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}



/* ══════════════════════════════════════════════════
   IMAGES — responsive, never overflow
══════════════════════════════════════════════════ */
.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: .8rem 0;
}

/* Подпись под изображением если есть */
.page-content img + em,
.page-content figure figcaption {
  display: block;
  font-size: .75rem;
  color: var(--fg-dim);
  margin-top: -.4rem;
  margin-bottom: .8rem;
}

/* figure — без лишних отступов */
.page-content figure {
  margin: .8rem 0;
}
.page-content figure img {
  margin: 0;
}

/* ══════════════════════════════════════════════════
   MOBILE FIXES
══════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 768px) {

  /* 1. Фиксируем высоту через dvh (dynamic viewport height) —
        не пересчитывается когда появляется клавиатура.
        Fallback на 100vh для старых браузеров. */
  #terminal-wrapper {
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }

  .term-window {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
    max-width: 100%;
  }

  /* 3. Скрываем мелкие колонки на маленьких экранах */
  .nav-perms,
  .nav-size,
  .post-perms {
    display: none;
  }

  /* 4. Шрифт чуть крупнее на мобильном для читаемости */
  #term-screen {
    font-size: .9rem;
  }

  /* 5. Инпут крупнее — легче попасть */
  .term-input-row {
    padding: .65rem 1rem;
    min-height: 50px;
  }

  .term-input-field {
    font-size: 1rem; /* Не меньше 16px — iOS не зумит при фокусе */
  }

  /* 6. Кнопки titlebar — скрываем на мобильном, не нужны */
  .term-buttons { display: none; }

  /* 7. Навигационная панель — чуть больше отступы */
  .term-nav-bar {
    padding: .7rem 1rem .3rem;
  }

  /* 8. Blog rows — стек вместо строки */
  .blog-row {
    flex-direction: column;
    gap: .15rem;
    padding: .5rem 0;
  }

  .post-date {
    font-size: .75rem;
  }
}

/* Предотвращаем zoom на iOS при фокусе input (font-size >= 16px) */
@supports (-webkit-touch-callout: none) {
  .term-input-field {
    font-size: max(1rem, 16px);
  }
}

/* ══════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════ */
@media print {
  #matrix-bg, #particles-bg, .crt-overlay, .crt-vignette,
  #boot-sequence, .term-titlebar, .term-input-row,
  .term-footer { display: none !important; }
  body { background: #fff; color: #000; overflow: auto; }
  .term-window { box-shadow: none; border: 1px solid #ccc; height: auto; }
  #terminal-wrapper { position: static; }
}

/* ══════════════════════════════════════════════════
   ERROR PAGE (404)
══════════════════════════════════════════════════ */
.error-pre {
  background: none;
  border: none;
  padding: .5rem 0 .8rem;
  font-size: .88rem;
  line-height: 1.25;
  overflow-x: auto;
}
.error-pre::before { display: none; }

.error-details {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  font-size: .83rem;
  margin: .6rem 0 1rem;
}
.error-line { display: flex; gap: .4rem; }

.error-suggest {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.error-suggest a.accent {
  color: var(--accent);
  text-decoration: none;
  transition: text-shadow .13s;
}
.error-suggest a.accent:hover { text-shadow: var(--glow-sm); }