/*!
 * qufox-docs engine bridge styles.
 * Everything here uses design-system tokens only — no raw colors, sizes,
 * or shadows. Site structure comes from components.css; this file covers
 * the engine-generated markup the design system cannot know about.
 */

/* ── Article width ───────────────────────────────────────────────────────
 * The design system caps .qf-prose at the narrow (form) width by default; for a
 * docs/blog article we widen it to fill the page container via the DS-provided
 * override token (--qf-prose-max, added in v0.6.2). */
.qf-prose {
  --qf-prose-max: none;
}

/* ── Code blocks (shiki dual-theme output) ─────────────────────────────
 * Shiki emits per-token `--shiki-dark` / `--shiki-light` variables
 * (defaultColor: false); the active theme picks which one applies.
 * Surfaces come from design tokens, token colors from the shiki theme. */
.qf-prose pre.shiki {
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono-family, var(--font-mono));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
}

.qf-prose pre.shiki code {
  background: none;
  border: 0;
  padding: 0;
  /* Inline code is medium weight to stand out in a sentence; a block is regular. */
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: 1.6;
}

pre.shiki span {
  color: var(--shiki-dark);
}

[data-theme="light"] pre.shiki span {
  color: var(--shiki-light);
}

/* ── Theme toggle (show the icon for the theme you can switch to) ────── */
[data-theme-icon="light"] {
  display: none;
}

[data-theme="light"] [data-theme-icon="dark"] {
  display: none;
}

[data-theme="light"] [data-theme-icon="light"] {
  display: inline-block;
}

/* ── Skip link (first focusable element; visible only while focused) ─── */
.qf-skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: var(--s-3);
  z-index: var(--z-modal);
  transform: translateY(-200%);
}

.qf-skip:focus {
  transform: none;
}

/* ── Post page rhythm ────────────────────────────────────────────────────
 * Title → date → tags → article. The page header's own bottom padding is more
 * than the tag row wants, so the row pulls up toward the date. A long tag
 * list continues after the article, above the older/newer links. */
.qf-post-tags {
  margin-block: calc(var(--s-3) - var(--s-5)) var(--s-6);
}

.qf-post-tags-all {
  margin-block-start: var(--s-8);
}

/* ── Post feed ───────────────────────────────────────────────────────────
 * Entries are design-system stories; each draws its own separator. */
.qf-feed {
  display: flex;
  flex-direction: column;
}

/* The page scrolls inside the app shell's main area, below the navbar, so the
 * side column sticks to the top of that area rather than under a fixed bar. */
.qf-twocol {
  --qf-aside-top: 0px;
}

/* ── Navbar on phones ────────────────────────────────────────────────────
 * The design system keeps the bar on one line; what leaves it is ours to say.
 * The brand-accent picker is a preference, not navigation. */
@media (max-width: 640px) {
  .qf-navbar .qf-select {
    display: none;
  }
}

/* ── Table of contents drawer (hidden by default, opened from the navbar) ──
 * The heading tree is always expanded. On wide viewports the panel floats in
 * the right margin without dimming the page; on narrow ones it overlays with a
 * scrim. Kept out of the app-shell grid so the article stays centered. */
.qf-toc-drawer .qf-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .qf-toc-drawer {
    top: var(--h-navbar);
    width: min(300px, 24vw);
  }
  /* No page-dimming scrim on desktop — the article stays interactive. */
  [data-toc-backdrop] {
    background: none;
  }
}

/* ── Folder tree (browse page and left drawer) ─────────────────────────
 * Folders are <details>, so open/closed state needs no JavaScript. Rows are
 * flush with the panel edge and indent one step per level via the nested list. */
.qf-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qf-tree .qf-tree {
  margin-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--divider);
  padding-inline-start: var(--s-2);
}

.qf-tree__summary,
.qf-tree__link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-14);
}

.qf-tree__summary {
  cursor: pointer;
  color: var(--text-strong);
  font-weight: 600;
  list-style: none;
}

/* Hide the native disclosure marker; the chevron below replaces it. */
.qf-tree__summary::-webkit-details-marker {
  display: none;
}

.qf-tree__summary:hover,
.qf-tree__link:hover {
  background: var(--bg-hover);
}

.qf-tree__link[aria-current="page"] {
  background: var(--bg-selected);
  color: var(--text-strong);
  font-weight: 600;
}

.qf-tree__chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.qf-tree__folder[open] > .qf-tree__summary .qf-tree__chevron {
  transform: rotate(90deg);
}

.qf-tree__icon {
  flex: none;
  color: var(--text-muted);
}

.qf-tree__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qf-tree__count {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: var(--fs-11);
  font-weight: 400;
}

/* On wide viewports the tree drawer floats in the left margin, matching the
 * table of contents drawer on the right. */
@media (min-width: 900px) {
  .qf-tree-drawer {
    top: var(--h-navbar);
    width: min(320px, 26vw);
  }
  [data-tree-backdrop] {
    background: none;
  }
}

/* ── Heading anchors (appended by the pipeline) ──────────────────────── */
.qf-heading-anchor {
  margin-inline-start: var(--s-2);
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.qf-prose :is(h1, h2, h3, h4, h5, h6):hover .qf-heading-anchor,
.qf-heading-anchor:focus-visible {
  opacity: 1;
}