/* ── Base ── */
body { font-family: 'Inter', sans-serif; }

/* ── Custom utilities (Tailwind CDN can't define these) ── */
.glass-nav {
  background: rgba(250, 250, 250, 0.95);
  border-bottom: 1px solid #c0c0c0;
}

.dark .glass-nav {
  background: rgba(18, 18, 18, 0.95);
  border-bottom-color: #333333;
}

/* ── Mobile menu backgrounds ── */
#mobile-menu {
  background: rgba(250, 250, 250, 0.98);
}

.dark #mobile-menu {
  background: rgba(18, 18, 18, 0.98);
}

.data-label {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Prose overrides for dev-logs post content ── */
.dark .prose-custom {
  color: #fafafa;
}

.prose-custom h1,
.prose-custom h2,
.prose-custom h3 {
  font-family: 'Maple Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: inherit;
}

.prose-custom h1 { font-size: 1.75rem; }
.prose-custom h2 { font-size: 1.35rem; }
.prose-custom h3 { font-size: 1.1rem; }

.prose-custom p,
.prose-custom ul,
.prose-custom ol,
.prose-custom blockquote {
  margin-bottom: 1.25rem;
}

.prose-custom p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: inherit;
}

.prose-custom ul {
  padding-left: 1.5rem;
  list-style-type: disc;
}

.prose-custom ol {
  padding-left: 1.5rem;
  list-style-type: decimal;
}

.prose-custom li {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.25rem;
  color: inherit;
}

.prose-custom img {
  max-width: 100%;
  height: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.svg-container {
  max-width: 100%;
  overflow: hidden;
  margin: 1.5rem 0;
}

.svg-container svg {
  width: 100%;
  height: auto;
}

.prose-custom hr {
  border: none;
  border-top: 1px solid #c0c0c0;
  margin: 2.5rem 0;
}

.dark .prose-custom hr {
  border-top-color: #333333;
}

.prose-custom table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.prose-custom th,
.prose-custom td {
  border: 1px solid #c0c0c0;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.dark .prose-custom th,
.dark .prose-custom td {
  border-color: #333333;
}

.prose-custom th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  background: #f0f0f0;
}

.dark .prose-custom th {
  background: #1e1e1e;
}

.prose-custom blockquote {
  border-left: 2px solid #006591;
  padding-left: 1rem;
  font-style: italic;
  color: #444444;
}

.dark .prose-custom blockquote {
  border-left-color: #89ceff;
  color: #c0c0c0;
}

.prose-custom a {
  color: #006591;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .prose-custom a {
  color: #89ceff;
}

.prose-custom :not(pre) > code {
  background: #f0f0f0;
  padding: 0.15em 0.35em;
  font-size: 0.85em;
  font-family: 'Maple Mono', monospace;
}

.dark .prose-custom :not(pre) > code {
  background: #2a2a2a;
  color: #e8e8e8;
}

.prose-custom pre {
  background: #f5f5f5;
  color: #121212;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.dark .prose-custom pre {
  background: #1a1a1a;
  color: #e8e8e8;
}

.prose-custom pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  font-family: 'Maple Mono', monospace;
  color: inherit;
}

/* ── Material Symbols ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Chroma: GitHub (light mode) ── */
.bg { background-color: #f5f5f5; }
.chroma { background-color: #f5f5f5; }
.chroma .err { color: #f6f8fa; background-color: #82071e }
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { background-color: #e5e5e5 }
.chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #7f7f7f }
.chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #7f7f7f }
.chroma .line { display: flex; }
.chroma .k { color: #cf222e }
.chroma .kc { color: #cf222e }
.chroma .kd { color: #cf222e }
.chroma .kn { color: #cf222e }
.chroma .kp { color: #cf222e }
.chroma .kr { color: #cf222e }
.chroma .kt { color: #cf222e }
.chroma .na { color: #1f2328 }
.chroma .nb { color: #6639ba }
.chroma .bp { color: #6a737d }
.chroma .nc { color: #1f2328 }
.chroma .no { color: #0550ae }
.chroma .nd { color: #0550ae }
.chroma .ni { color: #6639ba }
.chroma .nf { color: #6639ba }
.chroma .nl { color: #900; font-weight: bold }
.chroma .nn { color: #24292e }
.chroma .nx { color: #1f2328 }
.chroma .nt { color: #0550ae }
.chroma .nv { color: #953800 }
.chroma .vc { color: #953800 }
.chroma .vg { color: #953800 }
.chroma .vi { color: #953800 }
.chroma .s { color: #0a3069 }
.chroma .sa { color: #0a3069 }
.chroma .sb { color: #0a3069 }
.chroma .sc { color: #0a3069 }
.chroma .dl { color: #0a3069 }
.chroma .sd { color: #0a3069 }
.chroma .s2 { color: #0a3069 }
.chroma .se { color: #0a3069 }
.chroma .sh { color: #0a3069 }
.chroma .si { color: #0a3069 }
.chroma .sx { color: #0a3069 }
.chroma .sr { color: #0a3069 }
.chroma .s1 { color: #0a3069 }
.chroma .ss { color: #032f62 }
.chroma .m { color: #0550ae }
.chroma .mb { color: #0550ae }
.chroma .mf { color: #0550ae }
.chroma .mh { color: #0550ae }
.chroma .mi { color: #0550ae }
.chroma .il { color: #0550ae }
.chroma .mo { color: #0550ae }
.chroma .o { color: #0550ae }
.chroma .ow { color: #0550ae }
.chroma .p { color: #1f2328 }
.chroma .c { color: #57606a }
.chroma .ch { color: #57606a }
.chroma .cm { color: #57606a }
.chroma .c1 { color: #57606a }
.chroma .cs { color: #57606a }
.chroma .cp { color: #57606a }
.chroma .cpf { color: #57606a }
.chroma .gd { color: #82071e; background-color: #ffebe9 }
.chroma .ge { color: #1f2328 }
.chroma .gi { color: #116329; background-color: #dafbe1 }
.chroma .go { color: #1f2328 }
.chroma .gl { text-decoration: underline }
.chroma .w { color: #fff }

/* ── Chroma: GitHub Dark (dark mode) ── */
.dark .bg { color: #e6edf3; background-color: #1a1a1a; }
.dark .chroma { color: #e6edf3; background-color: #1a1a1a; }
.dark .chroma .err { color: #f85149 }
.dark .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
.dark .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.dark .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.dark .chroma .hl { background-color: #6e7681 }
.dark .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #737679 }
.dark .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #6e7681 }
.dark .chroma .line { display: flex; }
.dark .chroma .k { color: #ff7b72 }
.dark .chroma .kc { color: #79c0ff }
.dark .chroma .kd { color: #ff7b72 }
.dark .chroma .kn { color: #ff7b72 }
.dark .chroma .kp { color: #79c0ff }
.dark .chroma .kr { color: #ff7b72 }
.dark .chroma .kt { color: #ff7b72 }
.dark .chroma .na { color: #79c0ff }
.dark .chroma .nb { color: #f0883e }
.dark .chroma .bp { color: #8b949e }
.dark .chroma .nc { color: #f0883e; font-weight: bold }
.dark .chroma .no { color: #79c0ff; font-weight: bold }
.dark .chroma .nd { color: #d2a8ff; font-weight: bold }
.dark .chroma .ni { color: #ffa657 }
.dark .chroma .ne { color: #f0883e; font-weight: bold }
.dark .chroma .nf { color: #d2a8ff; font-weight: bold }
.dark .chroma .fm { color: #d2a8ff; font-weight: bold }
.dark .chroma .nl { color: #79c0ff; font-weight: bold }
.dark .chroma .nn { color: #ff7b72 }
.dark .chroma .nx { color: #e6edf3 }
.dark .chroma .py { color: #79c0ff }
.dark .chroma .nt { color: #7ee787 }
.dark .chroma .nv { color: #79c0ff }
.dark .chroma .vc { color: #79c0ff }
.dark .chroma .vg { color: #79c0ff }
.dark .chroma .vi { color: #79c0ff }
.dark .chroma .vm { color: #79c0ff }
.dark .chroma .p { color: #e6edf3 }
.dark .chroma .l { color: #a5d6ff }
.dark .chroma .ld { color: #79c0ff }
.dark .chroma .s { color: #a5d6ff }
.dark .chroma .sa { color: #79c0ff }
.dark .chroma .sb { color: #a5d6ff }
.dark .chroma .sc { color: #a5d6ff }
.dark .chroma .dl { color: #79c0ff }
.dark .chroma .sd { color: #a5d6ff }
.dark .chroma .s2 { color: #a5d6ff }
.dark .chroma .se { color: #79c0ff }
.dark .chroma .sh { color: #79c0ff }
.dark .chroma .si { color: #a5d6ff }
.dark .chroma .sx { color: #a5d6ff }
.dark .chroma .sr { color: #79c0ff }
.dark .chroma .s1 { color: #a5d6ff }
.dark .chroma .ss { color: #a5d6ff }
.dark .chroma .m { color: #a5d6ff }
.dark .chroma .mb { color: #a5d6ff }
.dark .chroma .mf { color: #a5d6ff }
.dark .chroma .mh { color: #a5d6ff }
.dark .chroma .mi { color: #a5d6ff }
.dark .chroma .il { color: #a5d6ff }
.dark .chroma .mo { color: #a5d6ff }
.dark .chroma .o { color: #ff7b72; font-weight: bold }
.dark .chroma .ow { color: #ff7b72; font-weight: bold }
.dark .chroma .or { color: #ff7b72 }
.dark .chroma .c { color: #8b949e; font-style: italic }
.dark .chroma .ch { color: #8b949e; font-style: italic }
.dark .chroma .cm { color: #8b949e; font-style: italic }
.dark .chroma .c1 { color: #8b949e; font-style: italic }
.dark .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
.dark .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
.dark .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
.dark .chroma .gd { color: #ffa198; background-color: #490202 }
.dark .chroma .ge { color: #e6edf3; font-style: italic }
.dark .chroma .gr { color: #ffa198 }
.dark .chroma .gh { color: #79c0ff; font-weight: bold }
.dark .chroma .gi { color: #56d364; background-color: #0f5323 }
.dark .chroma .go { color: #8b949e }
.dark .chroma .gp { color: #8b949e }
.dark .chroma .gs { font-weight: bold }
.dark .chroma .gu { color: #79c0ff }
.dark .chroma .gt { color: #ff7b72 }
.dark .chroma .gl { text-decoration: underline }
.dark .chroma .w { color: #6e7681 }