/* ===================================================================
   Thou Art That — KH content overlay
   TAT-specific tweaks on top of canonical knowledge-hub.css.
   Tokens come from marbl-v2.css. Don't redeclare KH internals.
   =================================================================== */

/* Audio first-child margin now lives in canonical knowledge-hub.css
   (promoted from TAT-local 30 Apr 2026). */

/* Source markdown sometimes carries a leading blockquote with the audio
   reference (e.g., do-no-harm.md). When build.mjs strips that block we
   may end up with an opening empty <blockquote>; hide just-in-case. */
.kh-article__body > blockquote:empty {
  display: none;
}

/* Skip-link visibility (canonical Marbl pattern, mirrors landing.css). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marbl-ember, #F35226);
  color: var(--marbl-charcoal, #131112);
  padding: var(--gap-xs, 12px) var(--gap-sm, 20px);
  text-decoration: none;
  border-radius: 0 0 var(--radius, 10px) 0;
  font-family: var(--marbl-font-body, 'Inter', sans-serif);
  font-weight: var(--font-semibold, 600);
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--marbl-white, #fff);
  outline-offset: 2px;
}

/* When the burger menu opens, .site-header gets .menu-is-open and goes
   position:fixed (canonical pin behaviour, see site-header.md §4). That
   removes ~90px of flow space and the centred shell jumps up. Hold the
   space here while the menu is open. Mirrors landing.css. */
body:has(.site-header.menu-is-open) {
  padding-top: 90px;
}

/* View transitions are NOT applied at the kh-content layer.
   Only the landing + origin-story pages opt in (landing.css + an
   inline opt-in injected by build.mjs into origin-story specifically),
   so navigation between study pages stays instant per Richard's call
   29 Apr 2026. */

/* Audio fallback delayed-reveal now lives in canonical
   waveform-player.css (promoted from TAT-local 29 Apr 2026). */

/* Menu overlay - subscribe CTA sits below the .menu-overlay__nav list,
   inside .menu-overlay__left. Inline-block so it shrink-wraps to label
   width, breathing room above. */
.menu-overlay__cta {
  margin-top: var(--gap-md, 40px);
  align-self: flex-start;
}


/* About page - "Who wrote it" Richard block: text left, avatar card right.
   Stacks on mobile. Avatar uses canonical --radius corner + subtle border. */
.about-author {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md, 40px);
  margin: 0 0 var(--gap-sm, 20px) 0;
}

.about-author__text {
  flex: 1 1 auto;
  min-width: 0;
}

.about-author__text > p:last-child {
  margin-bottom: 0;
}

.about-author__avatar {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.about-author__avatar img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--marbl-white-08, rgba(255, 255, 255, 0.08));
}

@media (max-width: 600px) {
  .about-author {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--gap-sm, 20px);
  }
  .about-author__avatar img {
    width: 80px;
    height: 80px;
  }
}

/* Right-column rail wraps the TOC + source-repo card into a single
   grid-column-3 cell, stacked vertically. Sticky like the left sidebar
   so the rail stays visible while the article scrolls. Internal scroll
   if the rail itself outgrows the viewport. */
.kh-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--gap-sm, 20px);
  font-size: var(--text-sm, 13px);
  position: sticky;
  top: var(--gap-md, 40px);
  align-self: start;
  max-height: calc(100dvh - var(--gap-md, 40px) * 2);
  overflow-y: auto;
  /* Match the .kh-sidebar / .kh-toc canonical scrollbar - thin grey
     subtle, not the page-level ember bar. */
  scrollbar-width: thin;
  scrollbar-color: var(--marbl-white-15, rgba(255, 255, 255, 0.15)) transparent;
}
.kh-rail::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.kh-rail::-webkit-scrollbar-track { background: transparent; }
.kh-rail::-webkit-scrollbar-thumb {
  background: var(--marbl-white-15, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-sm, 5px);
}
.kh-rail::-webkit-scrollbar-thumb:hover {
  background: var(--marbl-white-30, rgba(255, 255, 255, 0.3));
}

/* Canonical .kh-toc has its own position: sticky + max-height. With the
   rail wrapper now doing the sticky work, the inner sticky reserves
   max-height inside the rail and pushes the source card down. Neutralise
   the inner sticky locally so .kh-toc takes its natural height inside
   the flex column and the source card sits flush below it. */
.kh-rail .kh-toc {
  position: static;
  max-height: none;
  overflow-y: visible;
}

@media (max-width: 1023px) {
  .kh-rail { display: none; }
}

/* Mobile repo card lives inside the article column, above pagination.
   Hidden on desktop (where the right-rail copy is visible). */
.kh-source--mobile { display: none; }

@media (max-width: 1023px) {
  .kh-source--mobile {
    display: block;
    margin-top: var(--gap-md, 40px);
  }
}

/* Mobile rhythm overrides — text section breaks at 40px (was 80px on
   desktop), pagination top spacing matches the 20px below it visually
   instead of overshooting. */
@media (max-width: 768px) {
  .kh-article__body h2 {
    margin-top: var(--gap-md, 40px);
  }
  .kh-pagination {
    margin-top: var(--gap-sm, 20px);
    padding-top: var(--gap-sm, 20px);
  }
}