/* -----------------------------------------------------------------------------
   Light mode — warm paper (less sterile white/grey)
   Only when not dark, so we don't clobber html[data-theme=dark].
   ----------------------------------------------------------------------------- */
html[data-theme="light"],
html:not([data-theme]),
html[data-theme-setting="light"],
html[data-theme-setting="system"]:not([data-theme="dark"]) {
  --global-bg-color: #f4f0e6;
  --global-footer-bg-color: #f4f0e6;
  --global-card-bg-color: #f4f0e6;
  --global-divider-color: #e8e2d4;
  --global-newsletter-bg-color: #f4f0e6;
  --global-hover-text-color: #f4f0e6;
  --global-footer-link-color: #f4f0e6;
  --global-code-bg-color: rgba(181, 9, 172, 0.04);
}

/* default (no attrs yet): warm light before theme.js runs */
:root {
  --global-bg-color: #f4f0e6;
  --global-footer-bg-color: #f4f0e6;
  --global-card-bg-color: #f4f0e6;
  --global-divider-color: #e8e2d4;
  --global-newsletter-bg-color: #f4f0e6;
  --global-hover-text-color: #f4f0e6;
  --global-footer-link-color: #f4f0e6;
}

/* re-assert dark after our :root warm defaults (main.css loads first) */
html[data-theme="dark"] {
  --global-bg-color: #14120b;
  --global-footer-bg-color: #14120b;
  --global-card-bg-color: #212529;
  --global-divider-color: #14120b;
  --global-newsletter-bg-color: rgb(219.25, 219.25, 219.25);
  --global-hover-text-color: #f5f5f5;
  --global-footer-link-color: #14120b;
  --global-code-bg-color: #14120b;
}

/* header — no bottom rule */
#navbar.navbar,
.navbar {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* distill post — no rule under title / beside contents / under section headings */
d-article {
  border-top: none !important;
}
d-byline {
  border-top: none !important;
}
d-article d-contents,
d-article d-contents.distill-toc,
.post.distill d-contents {
  border-right: none !important;
  border: none !important;
}
d-article d-contents toc-line {
  border-right: none !important;
  display: none !important;
}
d-article h2,
.post.distill h2,
d-article h1,
.post.distill h1 {
  border-bottom: none !important;
}

/* About page list layout */
.post.about-page .profile figure {
  margin: 0;
}
.post.about-page .profile picture,
.post.about-page .profile img {
  display: block;
  max-width: 100%;
}

.post.about-page ul {
  margin: 0 !important;
  padding-left: 1.25rem !important;
  list-style-position: outside !important;
}

.post.about-page li {
  margin: 0 0 0.35rem 0;
}

.post.about-page li > p {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

.post.about-page li > ul {
  display: block;
  margin-top: 0.35rem !important;
  margin-bottom: 0 !important;
  padding-left: 1.25rem !important;
}

.post.about-page .about-me > p:first-child code,
.post.about-page .social-row code {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

/* Social links: more air between github / linkedin / X */
.post.about-page .social-row {
  margin: 0 0 1rem 0;
  letter-spacing: 0.01em;
}

.post.about-page .social-row .social-sep {
  display: inline-block;
  margin: 0 0.65rem;
  color: var(--global-text-color-light, #828282);
  font-weight: 400;
  opacity: 0.7;
  user-select: none;
}

.post.about-page .social-row a {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   KaTeX / math — inherit page text color (never black on dark)
   ----------------------------------------------------------------------------- */

.katex,
.katex *,
.katex .mathnormal,
.katex .mord,
.katex .mbin,
.katex .mrel,
.katex .mopen,
.katex .mclose,
.katex .mpunct,
.katex .minner,
.katex .mtext,
.katex .textit,
.katex .textrm,
.katex .textsf,
.katex .texttt,
.katex-html,
.katex-html *,
.katex-mathml,
.katex-mathml *,
d-article .katex,
d-article .katex *,
.post.distill .katex,
.post.distill .katex *,
.post-content .katex,
.post-content .katex *,
#markdown-content .katex,
#markdown-content .katex * {
  color: var(--global-text-color) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* MathML path (some browsers paint this black by default) */
.katex-mathml math,
.katex-mathml mrow,
.katex-mathml mi,
.katex-mathml mn,
.katex-mathml mo,
.katex-mathml msup,
.katex-mathml msub {
  color: var(--global-text-color) !important;
  fill: currentColor !important;
}

.katex .frac-line,
.katex .hline,
.katex .overline .overline-line,
.katex .underline .underline-line,
.katex .sqrt > .root {
  border-color: var(--global-text-color) !important;
  border-bottom-color: var(--global-text-color) !important;
  background: var(--global-text-color) !important;
}

/* Display math — center only true display blocks (NOT any p that merely contains $math$)
   Note: :only-child ignores text nodes, so p:has(> .katex:only-child) wrongly centered
   body paragraphs that include a single inline formula like $2^N$. */
.katex-display,
.math-display,
span.katex-display {
  display: block !important;
  text-align: center !important;
  margin: 1.25rem 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

/* $$…$$ rendered as a lone paragraph of display math */
d-article p:has(> .katex-display:only-child),
.post.distill p:has(> .katex-display:only-child),
.post-content p:has(> .katex-display:only-child),
#markdown-content p:has(> .katex-display:only-child),
.post-page article p:has(> .katex-display:only-child) {
  text-align: center !important;
  margin: 1.25rem 0 !important;
}

/* hide raw $ delimiters if something fails to process */
.math-inline,
.math-display {
  color: var(--global-text-color) !important;
}

/* -----------------------------------------------------------------------------
   Distill / post tables — clean production style (horizontal rules only)
   Matches live site + per-post _styles. No card chrome / zebra / orange hijacks.
   ----------------------------------------------------------------------------- */

d-article table,
.post.distill table,
.post-content table,
#markdown-content table,
.post-page article table {
  border-collapse: collapse !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  /* air above + below so tables don't jam into body copy */
  margin: 1.75rem 0 2.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: table !important;
}

/* break margin-collapse with following paragraphs */
d-article table + p,
.post.distill table + p,
.post-content table + p,
#markdown-content table + p,
.post-page article table + p,
d-article table + h2,
d-article table + h3,
.post.distill table + h2,
.post.distill table + h3,
.post-content table + h2,
.post-content table + h3,
#markdown-content table + h2,
#markdown-content table + h3 {
  margin-top: 0.5rem !important;
}

d-article table thead,
.post.distill table thead,
.post-content table thead,
#markdown-content table thead,
.post-page article table thead {
  background: transparent !important;
}

d-article table th,
d-article table td,
.post.distill table th,
.post.distill table td,
.post-content table th,
.post-content table td,
#markdown-content table th,
#markdown-content table td,
.post-page article table th,
.post-page article table td {
  border: none !important;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3) !important;
  /* slightly under body (distill ~1.06rem) — not full body, not tiny */
  padding: 0.55rem 0.65rem 0.55rem 0 !important;
  color: var(--global-text-color) !important;
  vertical-align: top !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: auto;
  background: transparent !important;
  font-size: 0.95rem !important;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  line-height: 1.45;
}

d-article table th,
.post.distill table th,
.post-content table th,
#markdown-content table th,
.post-page article table th {
  border-bottom: 2px solid rgba(128, 128, 128, 0.5) !important;
  font-weight: 600;
}

d-article table tbody tr:last-child td,
.post.distill table tbody tr:last-child td,
.post-content table tbody tr:last-child td,
#markdown-content table tbody tr:last-child td,
.post-page article table tbody tr:last-child td {
  border-bottom: 1px solid rgba(128, 128, 128, 0.3) !important;
}

/* Preserve markdown <strong> emphasis (e.g. After column) */
d-article table strong,
.post.distill table strong,
.post-content table strong,
#markdown-content table strong,
.post-page article table strong {
  font-weight: 700;
  color: var(--global-text-color);
}

@media (max-width: 768px) {
  d-article table,
  .post.distill table,
  .post-content table,
  #markdown-content table,
  .post-page article table {
    display: table !important;
    overflow: visible !important;
  }

  d-article table th,
  d-article table td,
  .post.distill table th,
  .post.distill table td,
  .post-content table th,
  .post-content table td,
  #markdown-content table th,
  #markdown-content table td,
  .post-page article table th,
  .post-page article table td {
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
    font-size: 0.95rem !important;
  }
}

/* -----------------------------------------------------------------------------
   Blog post list tags — tighter icon + text spacing
   ----------------------------------------------------------------------------- */

ul.post-list .post-meta,
ul.post-list .post-tags {
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

ul.post-list .post-tags a {
  display: inline;
  white-space: nowrap;
}

ul.post-list .post-tags i,
ul.post-list .post-meta i,
.post-page .post-tags i {
  margin-right: 0.15em;
}

ul.post-list .post-tags a + a {
  margin-left: 0.15em;
}

/* Archive / blog date+title list */
.archive table.table-borderless,
.post-index-list table.table-borderless {
  width: 100%;
  margin: 0;
}

.archive table.table-borderless th,
.archive table.table-borderless td,
.post-index-list table.table-borderless th,
.post-index-list table.table-borderless td {
  border: none !important;
  padding: 0.55rem 1rem 0.55rem 0 !important;
  vertical-align: baseline;
  line-height: 1.45;
}

.archive table.table-borderless th,
.post-index-list table.table-borderless th {
  width: 7.5rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--global-text-color);
  font-size: 0.95rem;
}

.archive table.table-borderless td,
.post-index-list table.table-borderless td {
  font-size: 1rem;
  color: var(--global-text-color);
}

.archive .post-link,
.post-index-list .post-link,
.archive a.news-title,
.post-index-list a.news-title {
  color: var(--global-text-color) !important;
  text-decoration: none;
}

.archive .post-link:hover,
.post-index-list .post-link:hover,
.archive a.news-title:hover,
.post-index-list a.news-title:hover {
  color: var(--global-theme-color) !important;
}

.archive .external-link-icon,
.post-index-list .external-link-icon {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.35rem;
  vertical-align: -0.05em;
  color: var(--global-text-color-light, #828282);
  flex-shrink: 0;
}

/* Blog index: normal page title (not the huge centered header-bar) */
.blog-index > .post-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--global-divider-color);
}

.blog-index > .post-header .post-title {
  font-size: 2rem;
  font-weight: 500;
  margin: 0;
  text-align: left;
  line-height: 1.2;
}

.blog-index > .post-header .post-description {
  margin: 0.35rem 0 0;
  color: var(--global-text-color-light);
}

.blog-index .post-index-list {
  margin-top: 0.5rem;
}