/* ==============================================================
   terminal.css — port of design/Terminal-mock.html to the Jekyll site.
   Lanyon/Poole are no longer loaded; this is the only site stylesheet
   (plus public/css/rouge.css for code highlighting).
   ============================================================== */

:root {
  --bg:#0d1117;
  --bg-2:#161b22;
  --bg-3:#1c2229;
  --line:#222831;
  --fg:#e6edf3;
  --fg-2:#c9d1d9;
  --dim:#7d8590;
  --dim-2:#6e7681;
  --green:#7ee787;
  --blue:#79c0ff;
  --orange:#ffa657;
  --red:#ff7b72;
  --purple:#d2a8ff;
  --yellow:#e3b341;
  --accent:var(--green);
  --mono:"JetBrains Mono","Inconsolata",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:72ch;
}

/* light variant — toggled by script.js (body.theme-light). */
body.theme-light {
  --bg:#f6f8fa;
  --bg-2:#ffffff;
  --bg-3:#eef1f4;
  --line:#d0d7de;
  --fg:#1f2328;
  --fg-2:#2d333b;
  --dim:#57606a;
  --dim-2:#6e7781;
  --green:#1a7f37;
  --blue:#0969da;
  --orange:#bc4c00;
  --red:#cf222e;
  --purple:#8250df;
  --yellow:#9a6700;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
}
body {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(126,231,135,0.04) 0 22%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(121,192,255,0.03) 0 30%, transparent 60%);
  min-height: 100vh;
}
body.theme-light {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(26,127,55,0.05) 0 22%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(9,105,218,0.04) 0 30%, transparent 60%);
}
::selection { background: rgba(126,231,135,0.25); color: #fff; }
body.theme-light ::selection { background: rgba(26,127,55,0.18); color: var(--fg); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.dim { color: var(--dim); }
a.dim:hover { color: var(--fg); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ===================== top bar ===================== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(13,17,23,0.85);
  border-bottom: 1px solid var(--line);
}
body.theme-light .topbar { background: rgba(246,248,250,0.9); }

.topbar-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 600; color: var(--fg);
}
.brand:hover { text-decoration: none; }
.brand .host { color: var(--dim); }
.brand .at { color: var(--dim); }
.brand .path { color: var(--blue); }
.brand .prompt { color: var(--green); }
.brand .caret {
  display: inline-block; width: 8px; height: 1em; vertical-align: -2px;
  background: var(--fg); margin-left: 4px;
  animation: blink 1.05s infinite;
}
@keyframes blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.topnav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.topnav a {
  padding: 6px 10px; border-radius: 6px;
  color: var(--fg-2); border: 1px solid transparent;
}
.topnav a:hover { color: var(--fg); background: var(--bg-2); text-decoration: none; }
.topnav a.active { color: var(--green); border-color: var(--line); background: var(--bg-2); }
.topnav a .k { color: var(--dim); }

.topbar .social {
  display: flex; gap: 10px; padding-left: 14px;
  margin-left: 6px; border-left: 1px solid var(--line);
}
.topbar .social a { color: var(--dim); padding: 6px; }
.topbar .social a:hover { color: var(--fg); text-decoration: none; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); color: var(--dim);
  cursor: pointer; font-family: var(--mono); font-size: 12px;
  line-height: 1; user-select: none;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--green); }

/* ===================== shared ===================== */
.view { padding: 40px 0 80px; }

.prompt-line {
  display: flex; gap: 10px; align-items: baseline;
  margin: 8px 0 18px;
  color: var(--dim); font-size: 13px;
  flex-wrap: wrap;
}
.prompt-line .p { color: var(--green); font-weight: 700; }
.prompt-line .arg { color: var(--fg); }
.prompt-line .comment { color: var(--dim-2); font-style: italic; }

.hr-dashed { border: none; border-top: 1px dashed var(--line); margin: 24px 0; }

/* tags */
.tag {
  display: inline-flex; align-items: center;
  color: var(--blue);
  border: 1px solid rgba(121,192,255,0.25);
  background: rgba(121,192,255,0.06);
  padding: 1px 8px; border-radius: 4px;
  font-size: 11.5px; line-height: 1.4;
}
.tag::before { content: "#"; color: var(--dim); margin-right: 1px; }
.tag:hover { background: rgba(121,192,255,0.14); text-decoration: none; }
.tag.alt {
  color: var(--orange);
  border-color: rgba(255,166,87,0.25);
  background: rgba(255,166,87,0.06);
}
.tag.alt::before { color: var(--dim); }
.tag.alt:hover { background: rgba(255,166,87,0.14); }

/* ===================== home : log listing ===================== */
.intro {
  color: var(--dim);
  max-width: var(--measure);
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.7;
}
.intro .name { color: var(--fg); font-weight: 700; }
.intro .accent { color: var(--green); }

.post-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.post-row {
  display: grid;
  grid-template-columns: 36px 110px 1fr 90px;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
}
.post-row:hover { background: rgba(255,255,255,0.014); }
body.theme-light .post-row:hover { background: rgba(0,0,0,0.02); }
.post-row .leader { color: var(--green); font-weight: 700; }
.post-row .date {
  color: var(--dim); font-size: 12.5px; padding-top: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.post-row .date b { color: var(--fg-2); font-weight: 500; font-size: 13px; }
.post-row .main h2 {
  font-family: var(--mono);
  font-weight: 600; font-size: 18px; line-height: 1.3;
  margin: 0 0 6px; color: var(--fg);
  letter-spacing: -0.005em;
}
.post-row .main h2 a { color: inherit; }
.post-row .main h2 a:hover { color: var(--green); text-decoration: none; }
.post-row .main .excerpt {
  color: var(--dim); max-width: var(--measure); margin: 0 0 10px;
  font-size: 13.5px; line-height: 1.6;
}
.post-row .main .excerpt p { margin: 0; }
.post-row .main .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-row .right {
  color: var(--dim); font-size: 12px; text-align: right;
  padding-top: 5px;
}
.post-row .right .num { color: var(--fg-2); font-weight: 600; font-size: 13px; }

.pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; color: var(--dim); font-size: 13px;
  flex-wrap: wrap; gap: 12px;
}
.pager .hint { color: var(--dim-2); }
.pager a { color: var(--fg-2); }
.pager a:hover { color: var(--green); text-decoration: none; }
.pager kbd {
  display: inline-block; padding: 1px 6px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; color: var(--fg-2);
  margin: 0 2px;
}

/* ===================== about / page ===================== */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: start;
}
.about .body { max-width: var(--measure); }
.about h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: 24px; margin: 0 0 6px; color: var(--fg);
}
.about .sub { color: var(--dim); font-size: 13px; margin-bottom: 22px; }
.about p { margin: 0 0 14px; color: var(--fg-2); font-size: 14px; line-height: 1.7; }
.about p .em { color: var(--green); font-style: normal; }
.about ul {
  list-style: none; padding: 0; margin: 14px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.about li {
  position: relative; padding-left: 22px;
  color: var(--fg-2); font-size: 13.5px; line-height: 1.6;
}
.about li::before {
  content: "$"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}
.about li a { color: var(--blue); }

.about .photo {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.about .photo img { display: block; width: 100%; height: auto; }
.about .photo .cap {
  padding: 8px 12px; color: var(--dim);
  font-size: 11px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
}
.about .photo .cap b { color: var(--fg-2); font-weight: 500; }

.about .kvs {
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2);
  padding: 14px 16px;
  font-size: 12.5px;
}
.about .kvs .kv {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px;
  padding: 4px 0;
}
.about .kvs .k { color: var(--dim); }
.about .kvs .v { color: var(--fg-2); }
.about .kvs .v a { color: var(--blue); }
.about .kvs hr { border: none; border-top: 1px dashed var(--line); margin: 8px 0; }

/* generic page (e.g. archive) when no side panel */
.page-simple { max-width: var(--measure); }
.page-simple h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: 24px; margin: 0 0 18px; color: var(--fg);
}
.page-simple ul { list-style: none; padding: 0; margin: 0; }
.page-simple ul li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--fg-2); font-size: 13.5px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.page-simple ul li .d { color: var(--dim); width: 110px; flex-shrink: 0; }
.page-simple ul li a { color: var(--fg); }
.page-simple ul li a:hover { color: var(--green); text-decoration: none; }
.page-simple p { color: var(--fg-2); }

/* ===================== post ===================== */
.post-head { margin-bottom: 24px; }
.post-path {
  display: flex; gap: 8px; align-items: center;
  color: var(--dim); font-size: 12px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.post-path a { color: var(--dim); }
.post-path a:hover { color: var(--fg-2); text-decoration: none; }
.post-path .sep { color: var(--dim-2); }
.post-path .now { color: var(--green); word-break: break-all; }

/* No outer card — the terminal is one continuous surface.
   The filetab is just a thin header strip; body flows on the page bg. */
.post-frame {
  background: transparent;
  border: none;
  overflow: visible;
}
.filetab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  background: transparent;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--dim);
  flex-wrap: wrap;
}
.filetab .dots { display: flex; gap: 6px; }
.filetab .dots span { width: 11px; height: 11px; border-radius: 50%; background: #2c2f36; }
body.theme-light .filetab .dots span { background: #c9d1d9; }
.filetab .name { color: var(--fg-2); font-weight: 500; word-break: break-all; }
.filetab .meta { margin-left: auto; color: var(--dim-2); font-size: 11.5px; }

.post-body { padding: 32px 0 40px; max-width: 780px; margin: 0 auto; }
.post-body .lbl {
  color: var(--green); font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
}
.post-body .lbl span:not(:first-child) { color: var(--dim); }
.post-body h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: 30px; line-height: 1.2; margin: 0 0 14px;
  letter-spacing: -0.015em; color: var(--fg);
}
body.theme-dark .post-body h1, body:not(.theme-light) .post-body h1 { color: #fff; }
.post-body .tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.post-body .lede {
  color: var(--dim); font-size: 14px; line-height: 1.7;
  margin: 0 0 22px; padding-left: 14px;
  border-left: 2px solid var(--line);
}
.post-body p {
  color: var(--fg-2); font-size: 14px; line-height: 1.78; margin: 0 0 14px;
}
.post-body p em { color: var(--orange); font-style: italic; font-weight: 500; }

/* Legacy inline-styled spans in older posts (font-size:0.5em + color:#525459
   leftover from the Lanyon-era lede styling). Override their inline styles
   so the prose is legible on the new palette. */
.post-body span[style*="0.5em"],
.post-body span[style*="#525459"] {
  font-size: inherit !important;
  font-family: inherit !important;
  color: var(--fg-2) !important;
}
.post-body h2 {
  font-family: var(--mono); font-weight: 600; font-size: 18px;
  color: var(--fg); margin: 28px 0 10px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
.post-body h2::before { content: "## "; color: var(--green); }
.post-body h3 {
  font-family: var(--mono); font-weight: 600; font-size: 15px;
  color: var(--fg); margin: 22px 0 8px;
}
.post-body h3::before { content: "### "; color: var(--green); }
.post-body ul, .post-body ol {
  color: var(--fg-2); padding-left: 22px; margin: 0 0 14px;
  font-size: 14px; line-height: 1.78;
}
.post-body li { margin: 4px 0; }
.post-body blockquote {
  margin: 14px 0; padding: 8px 14px;
  border-left: 2px solid var(--green); color: var(--dim);
  background: rgba(126,231,135,0.04);
}
.post-body blockquote p { color: var(--dim); }
.post-body img,
.post-body figure img {
  max-width: 100%; height: auto;
  display: block; margin: 18px auto;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-3);
}
.post-body figure { margin: 18px 0; }
.post-body figcaption {
  color: var(--dim); font-size: 11.5px; margin-top: 6px;
  letter-spacing: .04em; text-align: center;
}
.post-body table {
  width: 100%; border-collapse: collapse;
  margin: 14px 0; font-size: 13px;
}
.post-body table th, .post-body table td {
  border: 1px solid var(--line); padding: 6px 10px;
  color: var(--fg-2);
}
.post-body table th { background: var(--bg-3); color: var(--fg); }

/* inline code */
.post-body code,
.post-body p code,
.post-body li code {
  font-family: var(--mono);
  background: var(--bg-3);
  color: var(--orange);
  padding: 1px 6px; border-radius: 4px;
  font-size: 0.92em;
}

/* code blocks — work with Rouge's `.highlight` wrapper and bare <pre> */
.post-body pre,
.post-body .highlight pre,
.post-body figure.highlight pre,
.post-body .highlighter-rouge pre {
  margin: 18px 0; padding: 14px 16px;
  background: #06080a;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12.5px; line-height: 1.75;
  white-space: pre;
  color: var(--fg-2);
}
body.theme-light .post-body pre,
body.theme-light .post-body .highlight pre,
body.theme-light .post-body figure.highlight pre {
  background: #f6f8fa; color: var(--fg);
}
.post-body pre code,
.post-body .highlight code {
  background: transparent;
  color: inherit; padding: 0; border-radius: 0;
  font-size: inherit;
}

/* post footer (prev/next) */
.post-foot {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.post-foot .nav-a {
  display: block; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
  color: var(--fg-2);
}
.post-foot .nav-a:hover { border-color: var(--green); text-decoration: none; background: var(--bg-2); }
.post-foot .nav-a { grid-column: 1; }
.post-foot .nav-a.right { grid-column: 2; text-align: right; }
.post-foot .nav-a .lbl {
  color: var(--dim); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 4px;
}
.post-foot .nav-a .arrow { color: var(--green); margin: 0 6px; }

/* disqus container */
#disqus_thread {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px dashed var(--line);
}

/* page footer */
.pagefoot {
  margin-top: 64px; padding: 24px 0;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--dim); font-size: 12px;
  flex-wrap: wrap; gap: 12px;
}
.pagefoot .left { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pagefoot a { color: var(--dim); }
.pagefoot a:hover { color: var(--fg); }

@media (max-width: 880px) {
  .wrap { padding: 0 18px; }
  .about { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 90px 1fr; }
  .post-row .leader { display: none; }
  .post-row .right { display: none; }
  .post-body { padding: 24px 18px 32px; }
  .topnav a .k { display: none; }
  .post-foot { grid-template-columns: 1fr; }
}

/* keep Rouge code coloring on dark backgrounds even when light theme
   is active — code blocks themselves stay light in light mode, but the
   monokai accents still need to be visible. Rouge classes live under
   `.highlight`; tweak only where the default monokai is unreadable on
   the lighter page-bg we use in light mode. */
body.theme-light .highlight { color: #1f2328; }