/*
  isaac · blog — terminal aesthetic
  Consumes the shared design tokens from theme.css (night/day).
  No web fonts: pure system mono stack, true to the terminal look.
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 44px 20px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* ---- terminal window ---- */
.term {
  width: 100%;
  max-width: 760px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.32);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--panel-dark);
  border-bottom: 1px solid var(--border);
}
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.d-red  { background: var(--dot-red); }
.d-gold { background: var(--dot-gold); }
.d-green{ background: var(--green); }
.term-title {
  color: var(--faint);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.term-body { padding: 30px 34px 36px; }

/* ---- prompts & rules ---- */
.prompt {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.prompt .pfx { color: var(--green); font-weight: 700; margin-right: 4px; }
.prompt .cmd { color: var(--text); }
.rule { height: 1px; background: var(--border); margin: 22px 0; }

.intro { color: var(--muted); margin-bottom: 6px; }
.intro p { margin: 0; }
.empty { color: var(--faint); }
.empty .cmd { color: var(--green); }

/* ---- post list ---- */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.post-row a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}
.post-row a:hover .pr-title { color: var(--green); }
.pr-date  { color: var(--faint); font-size: 12.5px; white-space: nowrap; min-width: 6em; }
.pr-rt    { color: var(--dim);   font-size: 12px;   white-space: nowrap; min-width: 2.4em; }
.pr-title { color: var(--text); }
.pr-tags  { margin-top: 3px; padding-left: 8.4em; }

/* ---- tags ---- */
.tag { color: var(--dot-gold); font-size: 12px; text-decoration: none; }
.tag:hover { color: var(--green); }

/* ---- post header ---- */
.post-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
  margin: 6px 0 10px;
}
.post-meta {
  color: var(--faint);
  font-size: 12.5px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 28px;
}

/* ---- prose ---- */
.prose { color: var(--text); font-size: 14.5px; line-height: 1.78; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 16.5px; font-weight: 700; color: var(--text); margin-top: 36px; }
.prose h2::before { content: "## "; color: var(--green); }
.prose h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 28px; }
.prose h3::before { content: "### "; color: var(--green); }
.prose a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--border-bright);
}
.prose a:hover { border-bottom-color: var(--green); }
.prose strong { color: var(--text); font-weight: 700; }
.prose em { color: var(--muted); font-style: italic; }

.prose ul, .prose ol {
  list-style: none;
  padding-left: 2px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.prose ul li::before { content: "▸ "; color: var(--green); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li) ". "; color: var(--green); }

.prose blockquote {
  border-left: 2px solid var(--green);
  padding-left: 16px;
  margin: 0;
  color: var(--muted);
}
.prose hr { border: 0; border-top: 1px dashed var(--border-bright); margin: 30px 0; }
.prose img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }

/* ---- code ---- */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--panel-dark);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--dot-gold);
}
.prose pre {
  background: var(--panel-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

/* chroma syntax highlighting — themed via tokens (works in night & day) */
.chroma { background: transparent !important; }
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs { color: var(--faint); font-style: italic; } /* comment */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr { color: var(--green); }        /* keyword */
.chroma .kt { color: var(--green); }                                                                        /* type    */
.chroma .s, .chroma .sb, .chroma .sc, .chroma .s2, .chroma .s1, .chroma .se { color: var(--dot-gold); }      /* string  */
.chroma .m, .chroma .mi, .chroma .mf, .chroma .mh { color: var(--dot-gold); }                               /* number  */
.chroma .nf, .chroma .nx { color: var(--text); }                                                            /* func    */
.chroma .nb, .chroma .bp { color: var(--muted); }                                                           /* builtin */
.chroma .o, .chroma .ow, .chroma .p { color: var(--muted); }                                                /* operator*/
.chroma .nt { color: var(--green); }                                                                        /* tag     */

/* ---- nav ---- */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.post-nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.post-nav a:hover { color: var(--green); }
.post-nav .pfx { color: var(--green); margin-right: 4px; }

/* ---- theme toggle (matches résumé) ---- */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--faint);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--green); color: var(--green); }

/* ---- footer rail (man-page style, matches résumé) ---- */
.term-foot {
  width: 100%;
  max-width: 760px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ---- small screens ---- */
@media (max-width: 560px) {
  .term-body { padding: 24px 20px 28px; }
  .post-row a { flex-wrap: wrap; gap: 4px 12px; }
  .pr-tags { padding-left: 0; }
  .theme-toggle { top: 12px; right: 12px; }
}