/* ==========================================================================
   Shell layout + chrome: 3-column grid, left nav (logo/search/explorer/
   toggles), center (breadcrumbs/title/meta/article), right TOC, footer,
   and hover popovers. Reconstruction of the old Quartz layout.

   Grid (from the old variables.scss):
     desktop >=1200px : [320px | auto | 320px]
     tablet  800-1200 : [320px | auto]  (TOC drops into a row under center)
     mobile  <800px   : single column, left sidebar becomes a top bar
   ========================================================================== */

.page {
  max-width: 1500px;
  margin: 0 auto;
}

#quartz-body {
  display: grid;
  /* Pack rows at the top: the full-height left sidebar must not stretch the
     header/center/footer rows to fill the viewport (that left big top/bottom
     gaps around short content on wide screens). */
  align-content: start;
  column-gap: 5px;
  row-gap: 5px;
  grid-template-columns: 320px auto 320px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "grid-sidebar-left grid-header       grid-sidebar-right"
    "grid-sidebar-left grid-center       grid-sidebar-right"
    "grid-sidebar-left grid-footer       grid-sidebar-right";
}

@media all and (min-width: 800px) and (max-width: 1200px) {
  #quartz-body {
    grid-template-columns: 320px auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "grid-sidebar-left grid-header"
      "grid-sidebar-left grid-center"
      "grid-sidebar-left grid-sidebar-right"
      "grid-sidebar-left grid-footer";
    padding: 0 1rem;
  }
}

@media all and (max-width: 800px) {
  #quartz-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "grid-sidebar-left"
      "grid-header"
      "grid-center"
      "grid-sidebar-right"
      "grid-footer";
    padding: 0 1rem;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Sidebars
   -------------------------------------------------------------------------- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-sizing: border-box;
  padding: 1.5rem 2rem 2rem 2rem;
  /* max-height (not height) so a short sidebar sizes to its content and never
     forces the spanned content rows to 100vh; it still sticks + scrolls when long. */
  max-height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar.left  { grid-area: grid-sidebar-left;  z-index: 2; }
.sidebar.right { grid-area: grid-sidebar-right; }

/* Hide the right column entirely when it has no TOC (matches old behavior). */
.sidebar.right:empty { display: none; }
@media all and (min-width: 1200px) {
  .page:has(.sidebar.right:empty) #quartz-body {
    grid-template-columns: 320px auto;
    grid-template-areas:
      "grid-sidebar-left grid-header"
      "grid-sidebar-left grid-center"
      "grid-sidebar-left grid-footer";
  }
}

@media all and (min-width: 800px) and (max-width: 1200px) {
  .sidebar.right {
    position: static;
    height: auto;
    flex-direction: row;
    padding: 0;
    gap: 1rem;
  }
  .sidebar.right > * { flex: 1; max-height: 24rem; }
}

@media all and (max-width: 800px) {
  .sidebar.left {
    position: static;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1rem;
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    border-bottom: 1px solid var(--lightgray);
  }
  .sidebar.left .page-title { font-size: 1.5rem; }
  .sidebar.left .search-button .kbd { display: none; }
  .sidebar.right { position: static; height: auto; padding: 0; }
  .sidebar.right .toc { display: none; } /* TOC hidden on mobile */
}

/* --------------------------------------------------------------------------
   Logo / page title
   -------------------------------------------------------------------------- */
.page-title { margin: 0; font-size: 1.75rem; line-height: 1.1; }
.page-title a {
  color: var(--dark);
  font-weight: 700;
}
.page-title a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.search { position: relative; }
.search-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gray);
  background: color-mix(in srgb, var(--lightgray) 60%, transparent);
  border: 1px solid var(--lightgray);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.search-button:hover { border-color: var(--secondary); color: var(--dark); }
.search-button svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; }
.search-button svg .search-path { stroke: currentColor; stroke-width: 2; }
.search-button p { margin: 0; }
.search-button .kbd {
  margin-left: auto;
  font-family: var(--codeFont);
  font-size: 0.7rem;
  border: 1px solid var(--lightgray);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

.search-container {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 6, 12, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.search-container.active { display: flex; justify-content: center; align-items: flex-start; }
.search-space {
  margin-top: 12vh;
  width: min(660px, 92vw);
  background: var(--light);
  border: 1px solid var(--lightgray);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 var(--skeu-edge-light),
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 32px -8px var(--skeu-glow);
  overflow: hidden;
}
.search-bar {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: var(--dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lightgray);
  padding: 1rem 1.1rem;
  outline: none;
}
.search-bar::placeholder { color: var(--gray); }
.search-layout { max-height: 55vh; overflow-y: auto; }
.search-result {
  display: block;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--lightgray) 60%, transparent);
  cursor: pointer;
}
.search-result:hover, .search-result.focus { background: var(--highlight); }
.search-result .result-title { color: var(--dark); font-weight: 600; }
.search-result .result-preview { color: var(--gray); font-size: 0.82rem; margin-top: 0.15rem; }
.search-layout .search-empty { padding: 1rem 1.1rem; color: var(--gray); }

/* --------------------------------------------------------------------------
   Icon buttons (dark mode, copy link)
   -------------------------------------------------------------------------- */
/* Theme + search + copy share one row; search flexes to fill. */
.left-controls { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; }
.left-controls .search { flex: 1; min-width: 0; }
.left-controls .icon-btn { flex-shrink: 0; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--darkgray);
  background: color-mix(in srgb, var(--lightgray) 60%, transparent);
  border: 1px solid var(--lightgray);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { border-color: var(--secondary); color: var(--dark); }
.icon-btn svg { width: 18px; height: 18px; }
/* Icon shows the CURRENT theme: snowflake in cool mode, flame in warm mode. */
.icon-btn .coolIcon { display: inline; }
.icon-btn .warmIcon { display: none; }
:root[saved-theme="dark"] .icon-btn .coolIcon { display: none; }
:root[saved-theme="dark"] .icon-btn .warmIcon { display: inline; }
.copy-link-btn .cl-check { display: none; }
.copy-link-btn.copied .cl-link { display: none; }
.copy-link-btn.copied .cl-check { display: inline; color: var(--secondary); }

/* --------------------------------------------------------------------------
   Explorer (file-tree nav)
   -------------------------------------------------------------------------- */
.explorer { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.explorer-content { overflow-y: auto; }
.explorer ul { list-style: none; margin: 0; padding: 0; }
.explorer li { margin: 0; }
.explorer-content > ul { padding-left: 0; }

.nav-link {
  display: block;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  color: var(--darkgray);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5rem;
}
.nav-link:hover { color: var(--dark); background: var(--highlight); }
.nav-link.active { color: var(--secondary); font-weight: 600; }

/* Folders are always open; the title links to the folder's index page. */
.folder { margin-top: 0.15rem; }
.folder-title { display: block; padding: 0.2rem 0.4rem; color: var(--dark); font-weight: 600; }
/* Higher specificity than `.explorer ul` (which resets margin/padding) so the
   nested indent actually applies. */
.explorer .folder-children { padding-left: 1.25rem; border-left: 1px solid var(--lightgray); margin-left: 0.9rem; }

/* --------------------------------------------------------------------------
   Center column: breadcrumbs, title, meta, article
   -------------------------------------------------------------------------- */
.page-header { grid-area: grid-header; margin: 1.5rem 0 0 0; }
.center { grid-area: grid-center; min-width: 0; }
footer { grid-area: grid-footer; }

/* Right gutter for the center column so content never runs to the screen edge,
   including when the right TOC column is absent (it collapses on pages with no
   headings). The left gutter comes from the sidebar's own padding. */
@media all and (min-width: 800px) {
  .page-header, .center, footer { padding-right: 2rem; }
}

@media all and (max-width: 800px) {
  .page-header { margin-top: 1rem; }
}

.breadcrumb-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 0.75rem;
}
.breadcrumb-element { display: flex; align-items: center; }
.breadcrumb-element a { color: var(--gray); font-weight: 400; }
.breadcrumb-element a:hover { color: var(--secondary); }
/* The "❯" separators are <p> siblings between the breadcrumb elements. */
.breadcrumb-container p { margin: 0 0.7rem; }

.article-title {
  margin: 0.2rem 0 0.4rem 0;
  font-size: 2rem;
  color: var(--dark);
}
.content-meta { margin: 0 0 1.5rem 0; color: var(--gray); font-size: 0.85rem; }
.content-meta time + span::before { content: " · "; }

.center article { min-width: 0; }
.center article > p:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.toc { display: flex; flex-direction: column; min-height: 0; }
.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  font: inherit;
  color: var(--dark);
  background: none;
  border: none;
  cursor: pointer;
}
.toc-header h3 { margin: 0; font-size: 1rem; }
.toc-header .fold { transition: transform 0.3s ease; }
.toc-header[aria-expanded="false"] .fold { transform: rotate(-90deg); }
.toc-content {
  list-style: none;
  margin: 0.6rem 0 0 0;
  padding: 0;
  overflow-y: auto;
  border-left: 1px solid var(--lightgray);
}
.toc-header[aria-expanded="false"] + .toc-content { display: none; }
.toc-content li { margin: 0; }
.toc-content li a {
  display: block;
  padding: 0.18rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--gray);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4rem;
}
.toc-content li a:hover { color: var(--dark); }
.toc-content li a.active { color: var(--secondary); border-left-color: var(--secondary); }
.toc-content li.depth-1 a { padding-left: 1.5rem; }
.toc-content li.depth-2 a { padding-left: 2.25rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  margin-top: 2rem;
  padding: 1.5rem 0;
  color: var(--gray);
  font-size: 0.82rem;
  border-top: 1px solid var(--lightgray);
}
footer p { margin: 0; }

/* --------------------------------------------------------------------------
   Hover popovers (internal-link previews)
   -------------------------------------------------------------------------- */
.popover {
  position: absolute;
  z-index: 50;
  width: min(360px, 70vw);
  max-height: 360px;
  overflow: hidden;
  background: var(--light);
  border: 1px solid var(--lightgray);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px -10px var(--skeu-glow);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.popover.visible { opacity: 1; transform: translateY(0); }
.popover-inner { padding: 0.9rem 1.1rem; }
.popover-inner h1, .popover-inner h2 { margin-top: 0; font-size: 1.1rem; }
.popover-inner .popover-title { color: var(--dark); font-weight: 700; font-size: 1rem; }
.popover-inner .popover-preview { color: var(--gray); font-size: 0.85rem; margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}