/*
 * Publish framing tweaks — closer to minimal.guide / Obsidian Publish
 * (Minimal theme variables are in publish.css; this file loads after app.css.)
 */

/* Accent rgb(95, 123, 138) — both themes (replaces default purple / mismatched blues) */
.theme-dark,
.theme-light {
  --accent-h: 203;
  --accent-s: 19%;
  --accent-l: 46%;
  --ax1: #5f7b8a;
  --ax2: #7a94a5;
  --ax3: #4a6270;
}

/*
 * Dark surfaces: main rgb(34,34,34), sidebar rgb(30,30,30).
 * app.css sets --background-primary from --color-base-00 (not --bg1), so we remap color-base-*.
 */
.theme-dark {
  --bg1: #222222;
  --bg2: #1e1e1e;
  --bg3: hsla(0, 0%, 100%, 0.055);
  --color-base-00: #222222;
  --color-base-05: #202020;
  --color-base-10: #212121;
  --color-base-20: #1e1e1e;
  --color-base-25: #262626;
  --color-base-30: #333333;
  --color-base-35: #3d3d3d;
  --color-base-40: #555555;
  --ui1: #3a3a3d;
  --ui2: #454548;
  --ui3: #5c5c60;
  --tx1: #e2e2e2;
  --tx2: #9e9e9e;
  --tx3: #656565;
  /* Publish article: same rules in both themes; only these swap with mode */
  --publish-prose-muted: #bdbdbd;
  --publish-prose-strong: #e8e8e8;
  --publish-page-title: #f2f2f2;
  --publish-search-bg: #202020;
  --publish-header-icon: #ffffff;
}

/* Light: same accent ramp; neutral surfaces aligned with dark layout logic */
.theme-light {
  --bg1: #ffffff;
  --bg2: #f0f0f0;
  --bg3: #e4e4e4;
  --color-base-00: #ffffff;
  --color-base-05: #fafafa;
  --color-base-10: #f5f5f5;
  --color-base-20: #ececec;
  --color-base-25: #e0e0e0;
  --color-base-30: #d0d0d0;
  --color-base-35: #c4c4c4;
  --color-base-40: #a8a8a8;
  --tx1: #111111;
  --tx2: #5c5c5c;
  --tx3: #8a8a8a;
  --ui1: #e0e0e0;
  --ui2: #d4d4d4;
  --ui3: #bcbcbc;
  --publish-prose-muted: #3a3a3a;
  --publish-prose-strong: #111111;
  --publish-page-title: #0a0a0a;
  --publish-search-bg: var(--color-base-00);
  --publish-header-icon: #141414;
}

/* SPA: thin bar while HTML is fetched + morphed (cold first visits feel less “stuck”) */
body.publish-nav-loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--ax1, #5f7b8a) 50%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: publish-nav-shimmer 0.85s ease-in-out infinite;
}

@keyframes publish-nav-shimmer {
  0% {
    background-position: -45% 0;
  }
  100% {
    background-position: 145% 0;
  }
}

/* SPA View Transitions (Chromium + Safari 18+): short default cross-fade feels closer to Quartz snap */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
  }
}

/* Sidebar strip matches Publish (uses --bg2) */
.published-container {
  --sidebar-left-width: 270px;
  --sidebar-nav-pill-bg: var(--background-modifier-hover);
  --sidebar-nav-pill-bg-active: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.18);
  --nav-row-pad-block: 9px;
  --nav-row-pad-inline-start: 10px;
  --nav-row-pad-inline-end: 14px;
  --nav-row-gap: 10px;
  --sidebar-left-background: var(--bg2);
  /*
   * Left inset ramps down as the window narrows (60px at wide → 18px at 751px).
   * Sidebar width is fixed (inset + 280px nav); flex centering strip is NOT folded into padding-left.
   */
  --sidebar-nav-padding-inline-end: 18px;
  /* Slightly wider article vs outline column (defaults in app.css: 800px / 300px) */
  --page-width: 860px;
  --sidebar-right-width: 260px;
  /*
   * app.css sets overflow:auto here, which creates a second vertical scrollport. In-page
   * #hash then fights .markdown-preview-view (Quartz uses window scroll + scrollIntoView only).
   */
  overflow: hidden;
}

/* Let the main row fill the shell so the article column keeps height (pairs with overflow above). */
.published-container > .site-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Outline column: app.css uses transparent; match article so the band isn’t a different tone. */
.published-container.has-outline {
  --sidebar-right-background: var(--background-primary);
}

.published-container .site-body-center-column > .publish-renderer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.published-container .site-body-center-column .publish-renderer > .markdown-preview-view {
  flex: 1 1 auto;
  min-height: 0;
}

/* Fills flex space beside the nav so it isn’t a different tone than the article column. */
.published-container.has-navigation .render-container {
  background-color: var(--background-primary);
}

/*
 * One scrollbar for article + “On this page” (≥1201px: outline column visible per rules below).
 * Scroll lives on .render-container (not .render-container-inner) so the track is on the outer shell.
 * Column direction + inner flex:0 0 auto lets inner height follow content so this element scrolls.
 */
@media screen and (min-width: 1201px) {
  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .render-container {
    background-color: var(--background-primary);
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .render-container-inner {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
    align-items: stretch;
    /* flex-start: title column lines up with the no-outline case (centering left empty space beside the nav band) */
    justify-content: flex-start;
    flex-wrap: nowrap;
    background-color: var(--background-primary);
  }

  /* Article column capped at --page-width; outline sits to its right (inner is flex-start so title aligns with no-outline). */
  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .site-body-center-column {
    flex: 0 1 var(--page-width);
    max-width: var(--page-width);
    width: 100%;
    overflow: visible;
    min-width: 0;
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .site-body-right-column {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    max-height: none !important;
    width: var(--sidebar-right-width) !important;
    min-width: var(--sidebar-right-width);
    flex: 0 0 var(--sidebar-right-width) !important;
    align-self: stretch;
    pointer-events: auto;
    overflow: visible !important;
  }

  body:not(.sliding-windows)
    .published-container.is-readable-line-width.has-navigation.has-outline
    .site-body-right-column
    .site-body-right-column-inner {
    overflow-y: visible;
    max-height: none;
  }

  body:not(.sliding-windows)
    .published-container.is-readable-line-width.has-navigation.has-outline
    .publish-renderer
    > .markdown-preview-view
    > .markdown-preview-sizer {
    margin-right: 0 !important;
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .markdown-preview-view {
    overflow-y: visible !important;
    overflow-x: hidden;
    height: auto !important;
    max-height: none !important;
  }
}

.published-container .markdown-rendered .published-page-title-group {
  display: block;
}

/*
 * Desktop nav (751px+): compact sidebar, smooth left inset only, fixed 18px before the divider.
 */
@media screen and (min-width: 751px) {
  body:not(.sliding-windows):has(.published-container.is-readable-line-width.has-navigation),
  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation {
    --sidebar-viewport-inset: clamp(18px, calc(90px + (100vw - 1400px) * 42 / 649), 90px);
  }

  body:not(.sliding-windows):has(.published-container.is-readable-line-width.has-navigation) {
    background-color: var(--bg2);
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background-color: var(--background-primary);
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation .site-body-left-column {
    flex: 0 0 auto;
    width: calc(var(--sidebar-viewport-inset) + var(--sidebar-left-width));
    min-width: 0;
    max-width: none;
    padding: 32px 0 0 var(--sidebar-viewport-inset);
    box-sizing: border-box;
  }

  body:not(.sliding-windows)
    .published-container.is-readable-line-width.has-navigation
    .site-body-left-column
    .site-body-left-column-inner {
    width: 100%;
    max-width: var(--sidebar-left-width);
    margin-left: 0;
    margin-right: 0;
  }

  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation .site-body-right-column {
    width: max(0px, calc((100% - var(--page-width)) / 2));
  }
}

/*
 * TOC / graph: hide at ≤1200px (so it drops off sooner than a full-width “desktop” band).
 * Clear article outline margin whenever the column is hidden (1000–1200px app would still add it).
 */
@media screen and (max-width: 1200px) {
  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-outline .site-body-right-column,
  body:not(.sliding-windows) .published-container.is-readable-line-width.has-navigation.has-graph .site-body-right-column {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  body:not(.sliding-windows) .is-readable-line-width.has-outline.has-navigation .publish-renderer > .markdown-preview-view > .markdown-preview-sizer,
  body:not(.sliding-windows) .is-readable-line-width.has-graph.has-navigation .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    margin-right: 0 !important;
  }
}

/* Mobile drawer: no dimming scrim; plain hamburger (app.css paints all buttons on :hover) */
@media screen and (max-width: 750px) {
  .published-container.has-navigation .nav-backdrop {
    background-color: transparent !important;
  }

  .published-container.has-navigation .site-header .nav-menu-button.clickable-icon {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.15s ease;
    color: var(--publish-header-icon);
  }

  @media (hover: hover) {
    .published-container.has-navigation .site-header .nav-menu-button.clickable-icon:hover {
      background-color: transparent;
      box-shadow: none;
      transform: scale(1.06);
      color: var(--publish-header-icon);
    }
  }

  .published-container.has-navigation .site-header .nav-menu-button.clickable-icon:focus-visible {
    outline: 2px solid var(--ax1, #5f7b8a);
    outline-offset: 2px;
  }

  .published-container.has-navigation .markdown-preview-view {
    scroll-padding-top: calc(var(--header-height, 50px) + 12px);
  }

  /*
   * Drawer content: match desktop sidebar (app.css hides site name, uses article bg,
   * and applies legacy nav/search padding that fights site-sidebar-header-row + pills).
   */
  .published-container.has-navigation .site-body-left-column {
    background-color: var(--sidebar-left-background, var(--bg2)) !important;
    height: calc(100dvh - var(--header-height));
    overflow: hidden;
  }

  .published-container.has-navigation .site-body-left-column .site-body-left-column-inner {
    min-height: 0;
    overflow: hidden;
  }

  .published-container.has-navigation .site-sidebar-header-row .site-body-left-column-site-name {
    display: block !important;
  }

  .published-container.has-navigation .site-body-left-column .site-body-left-column-site-theme-toggle {
    margin: 0;
    padding: 0 !important;
  }

  .published-container.has-navigation .site-body-left-column .site-sidebar-header-row {
    padding: 0 var(--page-side-padding);
    margin-bottom: 12px;
  }

  .published-container.has-navigation .site-body-left-column .search-view-outer {
    padding: 0 var(--page-side-padding) 12px;
    margin-top: 10px;
  }

  .published-container.has-navigation .nav-view-outer.site-nav-panel {
    padding: 0 var(--page-side-padding) 120px;
  }

  .published-container.has-navigation .nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self,
  .published-container.has-navigation .nav-view-outer .nav-view .tree-item-children .tree-item-self,
  .published-container.has-navigation .nav-view-outer .tree-item-self.mod-collapsible.is-clickable,
  .published-container.has-navigation .nav-view-outer .tree-item-self.is-clickable:not(.mod-root) {
    padding: var(--nav-row-pad-block) var(--nav-row-pad-inline-end) var(--nav-row-pad-block) var(--nav-row-pad-inline-start);
  }

  .published-container.has-navigation .nav-view-outer .tree-item-children {
    padding-left: 0;
    padding-top: 2px;
    padding-bottom: 4px;
    margin-left: 0;
  }

  .published-container.has-navigation .nav-view-outer .tree-item-children .tree-item-children {
    padding-left: calc(var(--nav-row-pad-inline-start) + var(--nav-row-gap));
  }

  .published-container.has-navigation .nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
    padding-left: calc(var(--nav-row-pad-inline-start) + var(--nav-row-gap));
  }
}

/* Article column: breathing room + readable measure rhythm */
.published-container .markdown-preview-view {
  padding-top: 28px;
  padding-bottom: 120px;
}

@media screen and (min-width: 751px) {
  .published-container .markdown-preview-view {
    padding-top: 36px;
  }
}

@media screen and (min-width: 1000px) {
  .published-container .markdown-preview-view {
    padding-top: 44px;
  }
}

.published-container .markdown-preview-view .markdown-rendered {
  line-height: 1.62;
}

/* Softer body copy + title: identical layout in light/dark; only --publish-* tokens change on body */
.published-container .markdown-rendered > p,
.published-container .markdown-rendered > ul,
.published-container .markdown-rendered > ol {
  color: var(--publish-prose-muted);
}

.published-container .markdown-rendered strong {
  color: var(--publish-prose-strong);
}

.published-container .markdown-rendered h1.page-header {
  margin-top: 0.12em;
  color: var(--publish-page-title);
}

/* First section heading after title block */
.published-container .markdown-rendered .published-page-title-group ~ h2 {
  margin-top: 1.35em;
}

/* Title row: last edit + reading time */
.published-container .markdown-rendered .published-page-title-group:has(.published-page-meta) h1.page-header {
  margin-bottom: 0.35em;
}

.published-page-meta {
  margin: 0 0 2rem;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.published-page-meta-sep {
  margin: 0 0.5em;
  opacity: 0.55;
}

.published-page-meta-edited {
  color: inherit;
}

/* --- “On this page”: same colours as file explorer (nav tokens), nested same type size --- */
.published-container.has-outline .outline-view-outer {
  padding-top: 0;
  color: var(--nav-item-color);
}

.published-container.has-outline .outline-view-outer > .list-item.published-section-header {
  margin: 0 0 0.75rem;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.published-container.has-outline .outline-view-outer > .list-item.published-section-header > span {
  display: block;
  font-size: var(--component-title-size);
  font-weight: var(--component-title-weight);
  letter-spacing: 0.08em;
  text-transform: var(--component-title-transform);
  color: var(--component-title-color);
}

.published-container.has-outline .outline-view-outer .outline-view {
  padding-top: 0;
}

.published-container.has-outline .outline-view .tree-item-inner {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.published-container.has-outline .outline-view .tree-item-self {
  padding: 0.3rem 0;
  padding-inline-start: 0;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--nav-item-color);
}

.published-container.has-outline .outline-view .tree-item-self:hover {
  color: var(--nav-item-color-hover);
}

/* First nested level: single vertical rail */
.published-container.has-outline .outline-view-outer .outline-view > .tree-item > .tree-item-children {
  margin: 0.1rem 0 0.4rem 0;
  padding: 0.1rem 0 0.25rem 1rem;
  border-left: 1px solid var(--nav-item-border-color);
}

/* Deeper nesting: indent only */
.published-container.has-outline .outline-view .tree-item-children .tree-item-children {
  margin-left: 0;
  padding-left: 0.75rem;
  border-left: none;
}

.published-container.has-outline .outline-view-outer .tree-item-self.mod-active {
  font-weight: var(--nav-item-weight-active);
  color: var(--nav-item-color-active);
}

.published-container.has-outline .outline-view .outline-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Explorer: bold folder rows + root-level notes (override app nav parent weight) */
.published-container.has-navigation .nav-view-outer .nav-view .tree-item .tree-item-self.mod-collapsible {
  font-weight: var(--font-bold, 700);
}

.published-container.has-navigation
  .nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item.nav-root-leaf
  > .tree-item-self:not(.mod-collapsible) {
  font-weight: var(--font-bold, 700);
}

/* Search field on sidebar (same border/layout; fill follows theme token) */
.site-body-left-column .search-bar {
  background-color: var(--publish-search-bg);
  border-color: var(--ui2);
}

/* Site title + theme toggle on one row; breathing room before search */
.site-sidebar-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: var(--sidebar-nav-padding-inline-end, 18px);
  margin-bottom: 14px;
  position: relative;
}

.site-sidebar-header-row .site-body-left-column-site-name {
  flex: 1;
  min-width: 0;
  padding: 4px 0 2px 0 !important;
}

/* Fixed track box + centered knob; icons use opacity (not display:none) so layout stays stable */
.site-sidebar-header-row .site-body-left-column-site-theme-toggle {
  flex-shrink: 0;
  width: 50px;
  height: 22px;
  padding: 0 !important;
  margin: 0;
  position: relative;
  align-items: center;
}

.site-body-left-column-site-theme-toggle .checkbox-container {
  width: 50px;
  height: 22px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.site-body-left-column-site-theme-toggle .checkbox-container:after {
  margin: 0;
  top: 50%;
  left: 3px;
  transform: translate3d(0, -50%, 0);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.site-body-left-column-site-theme-toggle .checkbox-container.is-enabled:after {
  transform: translate3d(28px, -50%, 0);
}

.site-body-left-column-site-theme-toggle .checkbox-container.is-enabled:active:after {
  left: 3px;
  transform: translate3d(28px, -50%, 0) scale(0.94);
}

.site-body-left-column-site-theme-toggle .checkbox-container:not(.is-enabled):active:after {
  transform: translate3d(0, -50%, 0) scale(0.94);
}

.site-body-left-column-site-theme-toggle .option {
  margin: 0;
  top: 0;
  width: 25px;
  height: 22px;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
}

.site-body-left-column-site-theme-toggle .option svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.site-body-left-column-site-theme-toggle .option.mod-dark {
  left: 0;
  opacity: 0;
}

.site-body-left-column-site-theme-toggle .option.mod-light {
  left: 25px;
  opacity: 1;
}

.site-body-left-column-site-theme-toggle.is-dark .option.mod-dark {
  opacity: 1;
}

.site-body-left-column-site-theme-toggle.is-dark .option.mod-light {
  opacity: 0;
}

.site-body-left-column .search-view-outer {
  margin-top: 10px;
  padding-top: 0;
  padding-inline-end: var(--sidebar-nav-padding-inline-end, 18px);
}

/* Folder chevron: collapsed → points sideways (right); expanded → points down. Slightly larger than default 12px. */
.published-container .nav-view-outer .tree-item-self.mod-collapsible .collapse-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.35px;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform 100ms ease-in-out;
}

.published-container .nav-view-outer .tree-item.is-collapsed > .tree-item-self.mod-collapsible .collapse-icon svg {
  transform: rotate(0deg);
}

/* Root notes: icon-only alignment (spacer hidden when row icon is present) */
.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item.nav-root-leaf > .tree-item-self:not(.mod-collapsible) {
  margin-left: 0;
  border-left: none;
}

.published-container .nav-view-outer .tree-item-self:has(.site-nav-row-icon) .nav-root-chevron-spacer {
  display: none;
}

.published-container .nav-view-outer .tree-item.nav-root-leaf .nav-root-chevron-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* Match folder chevron metrics (see .mod-collapsible .collapse-icon svg below) */
.published-container .nav-view-outer .tree-item.nav-root-leaf .nav-root-chevron-spacer svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.35px;
}

/* Fill row beside chevron so presses in empty flex space still hit inner → link resolution */
.nav-view-outer .tree-item-self.is-clickable .tree-item-inner {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

/* Folder index link: full label hit target; chevron still toggles via row handler */
.nav-view-outer .tree-item-self.mod-collapsible:not(.mod-folder-no-index) .tree-item-inner {
  display: flex;
  align-items: flex-start;
}

.nav-view-outer .tree-item-self.mod-collapsible:not(.mod-folder-no-index) .tree-item-inner > a {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

/* Root / leaf rows: stretch inner + link so clicks on the row label band hit the <a> like folder rows */
.nav-view-outer .nav-view .tree-item-self.is-clickable:not(.mod-collapsible) .tree-item-inner {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-view-outer .nav-view .tree-item-self.is-clickable:not(.mod-collapsible) .tree-item-inner > a {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

/* Hit target lives on the row pill; links stay flush inside */
.nav-view-outer .tree-item-self .tree-item-inner > a {
  padding: 0;
  margin: 0;
  display: block;
}

/* First paint: sync theme toggle without sliding the knob */
html.theme-toggle-suppress .site-body-left-column-site-theme-toggle,
html.theme-toggle-suppress .site-body-left-column-site-theme-toggle *,
html.theme-toggle-suppress .site-body-left-column-site-theme-toggle *::before,
html.theme-toggle-suppress .site-body-left-column-site-theme-toggle *::after {
  transition: none !important;
}

/* Nav tree: animated height; collapsed branches are not interactive */
.nav-view-outer.site-nav-panel .tree-item-children {
  overflow: hidden;
  transition: height 0.35s ease;
}

.nav-view-outer.site-nav-panel .tree-item.is-collapsed > .tree-item-children {
  height: 0 !important;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.nav-view-outer .tree-item-children {
  padding-left: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  margin-left: 0;
}

.nav-view-outer .tree-item-children .tree-item-children {
  padding-left: calc(var(--nav-row-pad-inline-start) + var(--nav-row-gap));
  margin-left: 0;
  border-left: none;
}

.nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
  padding-left: calc(var(--nav-row-pad-inline-start) + var(--nav-row-gap));
  border-left: none;
}

.nav-view-outer .tree-item-self.mod-collapsible,
.nav-view-outer .nav-view .tree-item-self.is-clickable:not(.mod-root) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Row icons + trailing caret (reference sidebar dropdown pattern) */
.nav-view-outer .site-nav-row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--nav-row-gap);
  color: var(--nav-item-color);
  opacity: 0.9;
}

.nav-view-outer .site-nav-row-icon svg {
  width: 18px;
  height: 18px;
}

.nav-view-outer .tree-item-self.mod-collapsible .collapse-icon {
  display: none;
}

.nav-view-outer .site-nav-dropdown-caret {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: 0.75;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.nav-view-outer .site-nav-dropdown-caret svg {
  width: 16px;
  height: 16px;
}

.nav-view-outer .tree-item.site-nav-dropdown:not(.is-collapsed) > .tree-item-self .site-nav-dropdown-caret {
  transform: rotate(180deg);
}

/* Pill nav rows — shared inset so highlights line up with search field */
.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self,
.nav-view-outer .nav-view .tree-item-children .tree-item-self {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border-left: none !important;
  border-radius: 8px;
  margin-left: 0 !important;
  margin-bottom: 3px;
  padding: var(--nav-row-pad-block) var(--nav-row-pad-inline-end) var(--nav-row-pad-block) var(--nav-row-pad-inline-start);
  gap: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.nav-view-outer .tree-item-self.mod-collapsible.is-clickable {
  margin-left: 0 !important;
  margin-bottom: 3px;
}

.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self:hover,
.nav-view-outer .nav-view .tree-item-children .tree-item-self:hover:not(.mod-active) {
  background: var(--sidebar-nav-pill-bg);
  color: var(--nav-item-color-hover);
  opacity: 1;
  border-left: none !important;
}

.nav-view-outer .nav-view .tree-item-self.mod-active,
.nav-view-outer .nav-view .tree-item-self.mod-active:hover {
  background: var(--sidebar-nav-pill-bg-active);
  color: var(--nav-item-color-active);
  border-left: none !important;
}

.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-active,
.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-active:hover {
  color: var(--nav-parent-item-color-active);
}

.nav-view-outer.site-nav-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-inline-end: var(--sidebar-nav-padding-inline-end, 18px);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.nav-view-outer .tree-item-inner {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-view-outer.site-nav-panel:hover {
  scrollbar-color: var(--ui2) transparent;
}

.tree-item-self.mod-collapsible.mod-folder-no-index .tree-item-inner {
  cursor: pointer;
}

.nav-view-outer .tree-item-self.mod-collapsible.mod-folder-no-index.is-clickable .tree-item-inner {
  user-select: none;
}

/*
 * Quote / poem callouts (build: plainQuotesToCallouts on Collections/quotes.md).
 * Self-contained layout — PurgeCSS strips unused .callout rules from app.css.
 */
.callout[data-callout="poem"] {
  --callout-color: 95, 123, 138;
  --callout-icon: lucide-feather;
}

.published-container .markdown-rendered .callout[data-callout="quote"],
.published-container .markdown-rendered .callout[data-callout="poem"] {
  margin: 1.25rem 0;
  background-color: transparent;
  border: none;
  padding: 0;
  mix-blend-mode: normal;
  overflow: visible;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-icon,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-icon {
  display: none;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-title,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 0 0.4rem;
  gap: 0;
  line-height: 1.45;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-title-inner,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-title-inner {
  flex: 1 1 auto;
  min-width: 0;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-content,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-content {
  overflow: visible;
  padding: 0;
  background: transparent;
}

.published-container .markdown-rendered .callout[data-callout="quote"]:first-of-type,
.published-container .markdown-rendered .callout[data-callout="poem"]:first-of-type {
  margin-top: 0.5rem;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-title-inner,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-title-inner {
  font-size: var(--font-ui-small);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-content,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-content {
  color: var(--publish-prose-strong);
  line-height: 1.62;
  font-size: inherit;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-content > p,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-content > p {
  margin: 0 0 0.5rem;
}

.published-container .markdown-rendered .callout[data-callout="quote"] .callout-content > p:last-child,
.published-container .markdown-rendered .callout[data-callout="poem"] .callout-content > p:last-child {
  margin-bottom: 0;
}

.published-container .markdown-rendered .callout[data-callout="poem"] .callout-content > p {
  margin: 0 0 0.35rem;
  line-height: 1.55;
}

.published-container .markdown-rendered .callout-no-title .callout-content {
  padding-top: 0.15rem;
}

/*
 * Collections/Websites — compact link rows (plain URL lines still use website callouts).
 */
.published-container.page-collections-websites .markdown-rendered ul {
  list-style: none;
  margin: 0.75rem 0 0.25rem;
  padding: 0;
}

.published-container.page-collections-websites .markdown-rendered ul > li {
  margin: 0.3rem 0;
  padding: 0;
}

.published-container.page-collections-websites .markdown-rendered ul a.external-link {
  display: block;
  padding: 0.62rem 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--ui1);
  background: var(--bg3);
  color: var(--tx1);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.published-container.page-collections-websites .markdown-rendered ul a.external-link:hover {
  border-color: var(--ui2);
  background: var(--color-base-25, var(--bg3));
  color: var(--ax2, var(--text-accent));
  text-decoration: none;
}

.published-container .markdown-rendered .callout[data-callout="website"] {
  margin: 0.3rem 0;
  background: transparent;
  border: none;
  padding: 0;
}

.published-container .markdown-rendered .callout[data-callout="website"] .callout-icon {
  display: none;
}

.published-container .markdown-rendered .callout[data-callout="website"] .callout-title {
  display: block;
  padding: 0;
}

.published-container .markdown-rendered .callout[data-callout="website"] .callout-title-inner a {
  display: block;
  padding: 0.62rem 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--ui1);
  background: var(--bg3);
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.published-container .markdown-rendered .callout[data-callout="website"] .callout-content {
  display: none;
}

/* About Me: portrait / performance photo */
.published-container .markdown-rendered .about-me-photo {
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: min(100%, 520px);
}

@media screen and (min-width: 700px) {
  .published-container .markdown-rendered .about-me-photo {
    float: right;
    max-width: min(46%, 420px);
    margin: 0.15rem 0 1.25rem 1.75rem;
  }

  .published-container .markdown-rendered:has(.about-me-photo) {
    display: flow-root;
  }
}

.published-container .markdown-rendered .about-me-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--image-radius, 8px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}

.theme-light .published-container .markdown-rendered .about-me-photo img {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/*
 * Tech Stack pricing labels (build: wrapPricingTagsInHtml). Not Obsidian `.tag` chips.
 */
.published-container .markdown-rendered .price-tag {
  display: inline;
  margin-left: 0.35em;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.published-container .markdown-rendered .price-tag[data-tag="free"] {
  color: hsl(145, 42%, 58%);
}

.published-container .markdown-rendered .price-tag[data-tag="subscription"] {
  color: hsl(203, 48%, 62%);
}

.published-container .markdown-rendered .price-tag[data-tag="onetimepurchase"] {
  color: hsl(32, 62%, 58%);
}

.theme-light .published-container .markdown-rendered .price-tag[data-tag="free"] {
  color: hsl(145, 45%, 34%);
}

.theme-light .published-container .markdown-rendered .price-tag[data-tag="subscription"] {
  color: hsl(203, 50%, 36%);
}

.theme-light .published-container .markdown-rendered .price-tag[data-tag="onetimepurchase"] {
  color: hsl(32, 65%, 38%);
}