/* ============================================================
   post.css — article page redesign
   Cover and title, section navigation, unified sans body, editor
   code blocks, gutter heading marks, and the statusline.
   ============================================================ */

/* ------------------------------------------------------------------
   POST POSTER (hex shader cover header)
   ------------------------------------------------------------------ */
.post-poster {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--background-color);
  isolation: isolate;
  --pp-read-left: max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
}

.post-poster:not(:has(.pp-art)) {
  padding-top: 4rem;
}

/* Art container: row 1, full width */
.pp-art {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: clamp(15rem, 40vh, 26rem);
  overflow: hidden;
  z-index: 1;
}

.pp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pp-focus-x, 50%) var(--pp-focus-y, 38%);
}

/* Shader pending: keep the static image back so the decode is the entrance */
.pp-art[data-shader="pending"]:not([data-hex-active]) .pp-img {
  opacity: 0;
  animation: pp-img-late .7s ease 2s forwards;
}
@keyframes pp-img-late { to { opacity: 1; } }
.pp-art[data-hex-active] .pp-img { visibility: hidden; }

/* No shader or shader=off: fake the dissolve with a plain fade */
.pp-art:not([data-shader])::after,
.pp-art[data-shader="off"]::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--background-color) 8%,
    color-mix(in srgb, var(--background-color) 68%, transparent) 38%,
    transparent 100%);
}
.pp-art[data-shader="off"] .pp-img { opacity: 1; animation: none; }

/* Legibility shade under the transparent navbar */
.pp-art::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--background-color) 58%, transparent) 0%,
    color-mix(in srgb, var(--background-color) 20%, transparent) 52%,
    transparent 100%);
}

/* Canvas: same rules as #hex-hero-canvas */
.pp-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  border: 0;
}
.pp-art canvas.hex-boot-pending { opacity: 0; }

.pp-art:has(canvas) { cursor: crosshair; }

/* Head: its own row below the image, aligned to the reading column. */
.pp-head {
  grid-row: 2;
  grid-column: 1;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) var(--pp-read-left) 0;
  max-width: 46rem;
  min-width: 0;
}

.pp-path {
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 1.8vw, .82rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text-mute);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.pp-path .seg-tilde { color: var(--accent); }
.pp-path .seg-sep { opacity: .5; }
.pp-path .seg-ext { opacity: .6; }

.pp-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--text);
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Meta: directly beneath the title. */
.pp-meta {
  grid-row: 3;
  grid-column: 1;
  margin: 1rem var(--pp-read-left) 0;
  max-width: 46rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .85rem;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-mute);
}

.pp-meta time {
  color: inherit;
}

.pp-meta .pp-cat {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.pp-meta .pp-cat:hover {
  text-decoration: underline;
}

.pp-meta .pp-pv-wrap:not(:has(#busuanzi_value_page_pv:empty))::before {
  content: '👁 ';
}
.pp-meta .pp-pv-wrap:has(#busuanzi_value_page_pv:empty) {
  display: none;
}

.pp-meta .pp-tags a {
  color: inherit;
  text-decoration: none;
}
.pp-meta .pp-tags a:hover {
  color: var(--accent);
}

/* Poster variant: no top padding on the main container or body */
.post-poster ~ .main-content-container {
  padding-top: 0 !important;
}
.post-poster ~ .main-content-container .main-content-body {
  padding-top: 0 !important;
}

/* Transparent navbar when scrolled to top */
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .brand .path,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .brand .prompt,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .nav-links a,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .nav-link-button,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .icon-btn {
  color: var(--text);
  text-shadow: none;
}
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .nav-links a[aria-current]::before,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .nav-link-group[data-active="true"] > .nav-link-button::before,
html[data-page="post"][data-poster="art"]:not([data-scrolled]) body .navbar .brand .cursor {
  background: var(--accent);
  color: var(--accent);
}

@media (max-width: 1179px) {
  .post-poster {
    --pp-read-left: max(1.5rem, calc((100% - 46rem) / 2 + 1.5rem));
  }
}

/* Mobile: keep the cover compact and leave room for the title. */
@media (max-width: 640px) {
  .pp-art {
    height: clamp(12rem, 30vh, 18rem);
  }
  .pp-head {
    margin-top: 1.5rem;
  }
  .pp-title {
    font-size: clamp(1.65rem, 6.5vw, 2rem);
  }
  .pp-meta {
    font-size: .75rem;
    gap: .35rem .75rem;
  }
}

/* ------------------------------------------------------------------
   ARTICLE GRID (reading 46rem + outline 15rem, gap 4rem)
   ------------------------------------------------------------------ */
html[data-page="post"] .post-page-container {
  display: grid !important;
  grid-template-columns: minmax(0, 46rem) minmax(0, 15rem) !important;
  column-gap: 4rem !important;
  row-gap: 0 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  align-items: start !important;
}

html[data-page="post"] .article-content-container {
  grid-column: 1 !important;
  padding: 2.5rem 0 4rem !important;
}

html[data-page="post"] .toc-content-container {
  grid-column: 2 !important;
  width: 100% !important;
}

@media (max-width: 1179px) {
  html[data-page="post"] .post-page-container {
    display: block !important;
    max-width: 46rem !important;
  }
  html[data-page="post"] .toc-content-container {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   BODY FONT: unified sans
   ------------------------------------------------------------------ */
html[data-page="post"] .article-content.markdown-body {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--text) !important;
  margin-top: 2.25rem !important;
}

html[data-page="post"] .article-content.markdown-body p,
html[data-page="post"] .article-content.markdown-body li {
  font-family: var(--font-sans) !important;
}

/* ------------------------------------------------------------------
   HEADINGS: hanging ## / ### in the gutter (sans 700)
   Kill §NN, h2 ::after bar, h3 ¶
   ------------------------------------------------------------------ */
html[data-page="post"] .article-content.markdown-body h2,
html[data-page="post"] .article-content.markdown-body h3 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  position: relative !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

html[data-page="post"] .article-content.markdown-body h2::before,
html[data-page="post"] .article-content.markdown-body h3::before {
  position: absolute !important;
  right: 100% !important;
  margin-right: .75rem !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  opacity: .7 !important;
  font-size: .85em !important;
}

html[data-page="post"] .article-content.markdown-body h2::before {
  content: "##" !important;
}

html[data-page="post"] .article-content.markdown-body h3::before {
  content: "###" !important;
}

html[data-page="post"] .article-content.markdown-body h2::after {
  display: none !important;
}

/* Remove the old paper § NN and ¶ */
html[data-page="post"] .article-content.markdown-body h2 {
  counter-reset: none !important;
}

@media (max-width: 768px) {
  html[data-page="post"] .article-content.markdown-body h2::before,
  html[data-page="post"] .article-content.markdown-body h3::before {
    position: static !important;
    margin-right: .4rem !important;
    display: inline !important;
  }
}

/* ------------------------------------------------------------------
   TOC: section title, count and nested links
   ------------------------------------------------------------------ */
html[data-page="post"] .toc-content-container {
  position: sticky !important;
  top: 88px !important;
  align-self: start !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  font-family: var(--font-sans) !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
  padding: 1rem 0 !important;
}

html[data-page="post"] .toc-content-container .toc-title {
  display: flex !important;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .85rem !important;
  font-family: var(--font-sans) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

html[data-page="post"] .toc-content-container .toc-title-count {
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 400;
}

html[data-page="post"] .toc-content-container .page-title {
  display: none !important;
}

html[data-page="post"] .toc-content-container ol.nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--text-sub) 15%, transparent) !important;
}

html[data-page="post"] .toc-content-container .nav-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}

html[data-page="post"] .toc-content-container .nav-link {
  display: block !important;
  overflow-wrap: anywhere;
  padding: .28rem .75rem .28rem 1rem !important;
  text-decoration: none !important;
  color: var(--text-sub) !important;
  transition: color .15s, background .15s !important;
  border-radius: 0 !important;
}

html[data-page="post"] .toc-content-container .nav-link:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

html[data-page="post"] .toc-content-container .nav-item.active > .nav-link {
  color: var(--text) !important;
  font-weight: 500 !important;
}

html[data-page="post"] .toc-content-container .nav-item.active-current > .nav-link {
  color: var(--accent) !important;
  font-weight: 600 !important;
  position: relative !important;
}

html[data-page="post"] .toc-content-container .nav-item.active-current > .nav-link::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--accent) !important;
}

/* Tree guides for nested items */
html[data-page="post"] .toc-content-container ol.nav-child {
  border-left: 1px solid color-mix(in srgb, var(--text-sub) 12%, transparent) !important;
  margin-left: .75rem !important;
}

/* Math in TOC */
html[data-page="post"] .toc-content-container .toc-math {
  font-style: italic !important;
}
html[data-page="post"] .toc-content-container .toc-math.up {
  font-style: normal !important;
}

/* ------------------------------------------------------------------
   CODE BLOCKS: compact editor cards, following the page theme
   ------------------------------------------------------------------ */
html[data-page="post"] .article-content.markdown-body .code-container,
html[data-page="post"] .article-content.markdown-body figure.highlight {
  --highlight-background: var(--bg-2);
}

html[data-page="post"][data-theme="light"] .article-content.markdown-body .code-container,
html[data-page="post"][data-theme="light"] .article-content.markdown-body figure.highlight {
  --highlight-keyword: #aa3e68;
  --highlight-link: var(--highlight-keyword);
  --highlight-doctag: var(--highlight-keyword);
  --highlight-built-in: #94521f;
  --highlight-comment: #626b76;
  --highlight-addition: #1f7137;
}

html[data-page="post"] .article-content.markdown-body .code-container {
  background: var(--highlight-background) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  padding: 42px 0 0 !important;
  margin: 1.5rem 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}

html[data-page="post"] .article-content.markdown-body .code-container::before {
  display: block !important;
  content: attr(data-rel);
  inset: 0 0 auto;
  height: 42px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 70%, var(--bg-3));
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

html[data-page="post"] .article-content.markdown-body .code-container[data-rel="Cpp"]::before {
  content: "C++";
  text-transform: none;
}

html[data-page="post"] .article-content.markdown-body .code-container figcaption {
  top: 0;
  left: 1rem;
  max-width: calc(100% - 180px);
  margin: 0;
  overflow: hidden;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  line-height: 42px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html[data-page="post"] .article-content.markdown-body .code-container:has(figcaption)::before {
  content: "";
}

html[data-page="post"] .article-content.markdown-body .code-container :is(.copy-button, .fold-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  top: 7px;
  height: 28px;
  padding: 0 .5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  transition: color .15s, background .15s;
}

html[data-page="post"] .article-content.markdown-body .code-container .copy-button {
  right: 10px;
}

html[data-page="post"] .article-content.markdown-body .code-container .fold-button {
  right: 82px;
}

html[data-page="post"] .article-content.markdown-body .code-container :is(.copy-button, .fold-button):hover {
  background: var(--bg-3);
  color: var(--text);
}

html[data-page="post"] .article-content.markdown-body .code-container :is(.copy-button, .fold-button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

html[data-page="post"] .article-content.markdown-body figure.highlight {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  background: var(--highlight-background) !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight table {
  display: table !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  background: var(--highlight-background) !important;
  border-radius: 0 !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight tr {
  border: none !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight .gutter {
  width: 1%;
  padding: 1rem .85rem 1rem 1rem !important;
  background: transparent !important;
  border-right: 1px solid var(--border-2) !important;
  user-select: none !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight .gutter pre {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  text-align: right !important;
  color: var(--text-mute) !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight .code {
  padding: 1rem 1.1rem !important;
  background: transparent !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight .code pre span {
  background: transparent !important;
}

html[data-page="post"] .article-content.markdown-body figure.highlight pre {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: .875rem !important;
  line-height: 1.65 !important;
  color: var(--highlight-foreground) !important;
  background: transparent !important;
  font-feature-settings: 'liga' 0, 'calt' 0 !important;
  font-variant-ligatures: none !important;
}

/* ------------------------------------------------------------------
   STATUSLINE (task #16, deferred)
   ------------------------------------------------------------------ */