/* ============================================================================
   ssh-blog — styling after cveinnt.com (LiveTerm):
   the whole viewport is one terminal window: a small gap, a 2px rounded border,
   2rem of side padding, and text that always starts at the left edge. The window
   itself never re-flows or re-centres, so zooming in/out behaves like a real
   terminal instead of shifting the text around.

   Palette is Gruvbox-ish, as used by cveinnt.com:
     dark : bg #1e252e  fg #ebdbb2  orange #ff8037  cyan #18e3c8  gray #a89984
     light: bg #fbf1c9  fg #3c3836  yellow #d79921  green #98971a  gray #7c6f64
   ========================================================================= */

:root {
  color-scheme: light dark;

  --bg: #1e252e;
  --fg: #ebdbb2;
  --dim: #a89984;
  --border: #3c3836;
  --code-bg: #262d38;

  --accent: #ff8037; /* 边框、提示符用户名：cveinnt 的“黄”其实是橙 */
  --ok: #18e3c8;     /* 主机名、命令名、文件名：青 */
  --link: #18e3c8;
  --warn: #d79921;
  --err: #ff4971;
  --date: #b16286; /* 列表里的日期（eza 用紫，Gruvbox 紫正好） */

  /* 字体栈：拉丁与符号随站分发（Maple Mono），中文另外一份（--cjk）。
     body.term 会在中间插 "Maple Mono CJK"，让终端里的中文正好占两格。 */
  --mono: "Maple Mono", "JetBrainsMono Nerd Font", "JetBrainsMono NF", "JetBrains Mono",
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono";
  --cjk: "Noto Sans Mono CJK SC", "Sarasa Mono SC";
}

/* ---- 随站分发的字体 ------------------------------------------------------
   "中文 = 2 格"由字体自身的度量保证：Maple Mono 的拉丁与符号是 0.6em，
   中文与中文标点是 1.2em，正好两倍。于是不用管游客装了什么字体，
   也不需要运行时测量。子集口径：拉丁全量符号 + GB2312 全部汉字（6763）
   加仓库实际用到的字；许可是 OFL，见 ui/fonts/OFL.txt。 */
@font-face {
  font-family: "Maple Mono";
  src: url("/static/fonts/maple-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Maple Mono";
  src: url("/static/fonts/maple-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* 中文单独一个 family：文章页不插它——正文没有网格，中文保持系统字体的
   自然大小；只有终端需要两格。unicode-range 限定在中文范围，它抢不走拉丁和符号。 */
@font-face {
  font-family: "Maple Mono CJK";
  src: url("/static/fonts/maple-mono-cjk.woff2") format("woff2");
  unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE10-FE4F, U+FF00-FFEF, U+20000-2FA1F;
  font-display: swap;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbf1c9;
    --fg: #3c3836;
    --dim: #7c6f64;
    --border: #ebdbb2;
    --code-bg: #f2e5bc;

    --accent: #d79921;
    --ok: #98971a;
    --link: #427b58;
    --warn: #b57614;
    --err: #cc241d;
    --date: #8f3f71;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--fg) var(--bg); /* Firefox */
  scrollbar-width: thin;
}

/* Chromium's default scrollbar is a glaring white bar with arrow buttons; style
   it after the terminal instead (cveinnt.com does the same). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--fg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* 去掉滚动条两端的箭头按钮（只写 ::-webkit-scrollbar-button 在部分 Chromium
   版本上不生效，必须把这些带状态的伪类一起声明） */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  padding: 0.5rem;               /* cveinnt 的 p-2：外框与窗口之间留一条缝 */
  background: var(--bg);
  color: var(--fg);
  /* 字体：拉丁与符号用随站分发的 Maple Mono（装了什么都不影响渲染），
     中文落到 --cjk 里的本机等宽中文字体。
     关掉连字（liga）：foot 不做连字，关掉才和终端一致，也让字符网格可预测。 */
  font-family: var(--mono), var(--cjk), monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* ---- the one terminal window everything lives in ------------------------ */
.term-frame {
  border: 2px solid var(--accent);
  border-radius: 6px;
  /* 上下收紧：那一圈空白只想给文字留一口气，不需要和对齐用的左右缩进一样宽 */
  padding: 1rem 2rem;
  background: var(--bg);
}
@media (max-width: 40rem) {
  .term-frame { padding: 0.75rem 1rem; border-width: 1px; }
}

/* On the terminal page the frame IS the viewport: the content scrolls inside
   the frame (like a terminal's scrollback), so there is never a page scrollbar
   and zooming cannot move anything horizontally. */
body.term {
  height: 100vh;
  height: 100dvh;
  padding: 0.5rem;
  display: flex;
  font-size: 16px;
  overflow: hidden;
  /* 终端里所有对齐都按字符格算，所以中文要占满两格 → 插 "Maple Mono CJK"。
     文章页不插它：那里没有网格，中文保持系统字体的自然大小。 */
  font-family: var(--mono), "Maple Mono CJK", var(--cjk), monospace;
}

/* 浏览器 UA 样式给 pre/code 直接指定了 font-family: monospace，直接声明优先于
   从 body 继承的字体栈，结果 banner、cat 出来的 ASCII art、代码块都用系统默认
   等宽字体——Windows 中文环境下那是宋体，制表符和方块是全角（1em），ASCII 是
   半角（0.5em），65 格的 ASCII art 会逐格错开。强制继承终端的字体栈即可。 */
pre, code, kbd, samp { font-family: inherit; }

body.term .term-frame {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.term-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 真正的终端窗口里没有滚动条：内容自己滚，JS 每次执行完滚到底 */
  scrollbar-width: none;
}
.term-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---- links, focus, a11y ------------------------------------------------- */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; margin-bottom: 1rem; }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---- banner ------------------------------------------------------------- */
/* The art is 65 cells wide, so 39em. min(1rem, 2.1vw) keeps it at full size on
   any normal window (≥762px wide, including at ordinary zoom levels) and only
   scales it down on genuinely narrow viewports, where it would otherwise be
   cut off. The rest of the text never moves, so zooming stays left-aligned. */
.banner {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: min(1rem, 2.1vw);
  line-height: 1.15;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.banner::-webkit-scrollbar { height: 0; }

/* 开场文字（站点说明、SSH 入口、最新文章、help 提示）紧跟在横幅下面。
   内容来自 shell 的 HTML 方言，换行原样保留。*/
.banner-intro {
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--fg);
  font-size: 1em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ---- the terminal transcript ------------------------------------------- */
/* Command output is HTML with the original newlines in it: pre-wrap is what
   keeps those newlines visible. line-height 比正文紧：终端里一屏要放很多行，
   1.7 的行距会让命令靠不开、看起来空。*/
.term-out { margin: 0; white-space: pre-wrap; line-height: 1.4; }

.term-out .out {
  margin: 0.3rem 0 0.6rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 1em;
  line-height: 1.4;
}
.term-out .code {
  margin: 0.3rem 0 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 0.95em;
  line-height: 1.5;
  overflow-x: auto;
  scrollbar-width: thin;
}
.term-out .cmdline { margin: 1rem 0 0.1rem; }
/* ASCII 艺术字：行距必须紧，否则方块字形的竖线连不上、字母会“散架” */
.term-out .art {
  margin: 0.3rem 0 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1em;
  line-height: 1.15;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.term-out .art::-webkit-scrollbar { height: 0; }
.term-out .art + .out { margin-top: 0.5rem; }
.term-out .cmdline .typed { color: var(--fg); font-weight: 400; }

/* shell Styler classes (see shell/style.go) */
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.err { color: var(--err); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.date { color: var(--date); }
.kw { color: var(--link); }
.str { color: var(--warn); }
.cmt { color: var(--dim); }

/* ---- prompt ------------------------------------------------------------- */
.ps1 { white-space: nowrap; }
.ps1 .user { color: var(--accent); }
.ps1 .host { color: var(--ok); }
.ps1 .cwd { color: var(--dim); }

.cmdform {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.3rem 0 0;
}
.cmdinput {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: none;
  padding: 0.1rem 0;
  caret-color: var(--accent);
}
.cmdinput::placeholder { color: var(--dim); }

.nolist { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.nolist li { margin: 0.15rem 0; }

/* ---- content pages (posts, tags, search) inside the same frame ---------- */
.prompt {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 0.95em;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.prompt::-webkit-scrollbar { height: 0; }
.prompt .user { color: var(--accent); }
.prompt .at, .prompt .dots { color: var(--dim); }
.prompt .host { color: var(--ok); }
.prompt .cmd { color: var(--fg); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  margin: 1rem 0 1.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--border);
  font-size: 0.95em;
}
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::before { content: "▸ "; }
.search { margin-left: auto; display: flex; }
.search input {
  font: inherit;
  font-size: 0.95em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  width: 11rem;
}

/* left-aligned measurement: a readable line length without centring, so the
   text never slides sideways when the page is zoomed */
main { max-width: 50rem; }

h1 { font-size: 1.25rem; line-height: 1.5; margin: 1.4rem 0 0.3rem; }
h1::before { content: "# "; color: var(--accent); }

.list { list-style: none; margin: 0 0 2rem; padding: 0; }
.list li { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.list .slug { font-weight: 700; }
.list .meta { display: block; font-size: 0.85em; color: var(--dim); margin-top: 0.1rem; }
.list .summary { margin: 0.3rem 0 0; }
.tag { color: var(--ok); }
.tagline { color: var(--dim); margin-top: 1.1rem; }
.nolist, .dim { color: var(--dim); }

.prose { margin-top: 1.4rem; }
.prose p { margin: 1.05em 0; }
.prose h2, .prose h3, .prose h4 { margin: 1.7rem 0 0.5rem; line-height: 1.5; font-size: 1.1rem; }
.prose h2::before { content: "## "; color: var(--accent); }
.prose h3::before { content: "### "; color: var(--accent); }
/* 列表序号是画在内容框外面的（list-style-position: outside），它占的宽度由
   padding-left 决定。1.4em 只够放 "1."，"10." 这种就会溢出到盒子左侧——而终端
   输出所在的 .term-scroll 是 overflow-x: hidden，序号会被裁掉。所以序号列表
   要给到 2.5em（足够 "10." + 间隙），无序列表的 • 只需要 1.7em。 */
.prose ul, .prose ol { margin: 1.05em 0; }
.prose ul { padding-left: 1.7em; }
.prose ol { padding-left: 2.5em; }
.prose li { margin: 0.3em 0; }
.prose li > ul, .prose li > ol { margin: 0.35em 0; }
.prose blockquote {
  margin: 1rem 0;
  padding: 0.2rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--dim);
}
.prose pre {
  overflow-x: auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 0.95em;
  line-height: 1.65;
}
.prose code { background: var(--code-bg); border-radius: 3px; padding: 0.1em 0.35em; font-size: 0.95em; }
.prose pre code { background: none; padding: 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; text-align: left; }
.prose img { max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px dashed var(--border); margin: 1.8rem 0; }

article > .meta { color: var(--dim); font-size: 0.9em; margin: 0 0 0.4rem; }
.ssh-hint {
  margin-top: 1.8rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 0.9em;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.ssh-hint::-webkit-scrollbar { height: 0; }
.prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; font-size: 0.95em; }
footer { margin-top: 2.5rem; padding-top: 0.9rem; border-top: 1px dashed var(--border); color: var(--dim); font-size: 0.9em; }

/* ---- the local style editor (browser only, never touches the server) ---- */
.editor {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.9rem 1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}
.editor-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9em; }
.editor-bar #ed-file { margin-right: auto; }
.editor-bar button {
  font: inherit;
  font-size: 0.85em;
  color: var(--fg);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}
.editor-bar button:hover { border-color: var(--accent); color: var(--accent); }
.editor textarea {
  width: 100%;
  height: 40vh;
  resize: vertical;
  font: inherit;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--fg);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem;
}
.editor-note { font-size: 0.85em; margin: 0.5rem 0 0; }