/* Docs layout: sidebar + content */
/* Match the landing exactly: the content area caps at the home column (1168px,
   not wide-size 1280px) with the same --mp-edge gutter sitting *outside* it.
   The gutter is folded into max-width so the inner content stays a full 1168px
   (a plain max-width:1168px would let the padding shrink content to ~1128px). */
.mp-docs { max-width: calc(var(--wp--style--global--content-size, 1168px) + 2 * var(--mp-edge, 1.25rem)); margin-inline: auto; padding: 2rem var(--mp-edge, 1.25rem); }
.mp-docs__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 781px) { .mp-docs__grid { grid-template-columns: 1fr; gap: 1rem; } }

/* Sidebar nav. max-height + overflow let a tree taller than the viewport scroll
   internally; without it the sticky pin hides the lower entries until the article
   column scrolls far enough to release the sticky. overflow-y:auto also clips the
   x-axis, so links flush at the left edge get their focus outline cropped — the
   left padding gives the outline room, and the matching negative margin keeps the
   nav visually aligned. */
.mp-docs-nav { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; padding-left: .5rem; margin-left: -.5rem; padding-right: .75rem; font-size: .94rem; }
/* Single-column: stack the nav normally instead of pinning it over the article. */
@media (max-width: 781px) { .mp-docs-nav { position: static; max-height: none; overflow: visible; } }

/* Collapsible behaviour. Desktop: the <summary> toggle is hidden and the tree is
   always shown (the block renders <details open>). Mobile: the <summary> becomes a
   tap-to-open bar and the tree collapses (assets/js/docs-nav.js drops `open` below
   781px) so the index no longer pushes the content down. */
.mp-docs-nav__details { border: 0; }
.mp-docs-nav__summary { display: none; }
.mp-docs-nav__summary::-webkit-details-marker { display: none; }
@media (max-width: 781px) {
	.mp-docs-nav__summary {
		display: flex; align-items: center; justify-content: space-between;
		gap: .5rem; cursor: pointer; list-style: none;
		padding: .7rem .9rem; border: 1px solid var(--mp-hair); border-radius: 10px;
		font-weight: 600; color: var(--mp-ink); background: var(--mp-surface);
	}
	.mp-docs-nav__summary::after {
		content: ""; width: .55rem; height: .55rem; flex: none;
		border-right: 2px solid var(--mp-muted); border-bottom: 2px solid var(--mp-muted);
		/* The glyph is two borders of a rotated square, so its visible mass sits off-centre
		   in the box; translateY re-centres it against the label — up for the down-chevron
		   (closed), down for the up-chevron (open). */
		transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
	}
	.mp-docs-nav__details[open] > .mp-docs-nav__summary { margin-bottom: .5rem; }
	.mp-docs-nav__details[open] > .mp-docs-nav__summary::after { transform: translateY(2px) rotate(-135deg); }
}

.mp-docs-nav ul { list-style: none; margin: 0; padding: 0; }
.mp-docs-nav__cat > .mp-docs-nav__cat-label { font-weight: 600; color: var(--mp-ink); margin: 1rem 0 .35rem; }
.mp-docs-nav a { display: block; padding: .25rem 0; color: var(--mp-ink-2); text-decoration: none; }
.mp-docs-nav a:hover { color: var(--mp-accent); }
.mp-docs-nav a[aria-current="true"] { color: var(--mp-accent); font-weight: 600; }

/* Search */
.mp-docs-search { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.mp-docs-search input[type="search"] { flex: 1; padding: .6rem .8rem; border: 1px solid var(--mp-hair); border-radius: 8px; }
.mp-docs-search button { padding: .6rem 1rem; border: 0; border-radius: 8px; background: var(--mp-accent); color: #fff; cursor: pointer; }

/* Breadcrumb */
.mp-docs-breadcrumb { font-size: .85rem; color: var(--mp-muted); margin-bottom: 1rem; }
.mp-docs-breadcrumb a { color: var(--mp-muted); text-decoration: none; }
.mp-docs-breadcrumb a:hover { color: var(--mp-accent); }

/* Article cards on the docs root (lead category) */
.mp-docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.mp-docs-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--mp-hair); border-radius: 12px; padding: 1.1rem; background: var(--mp-surface); transition: border-color .15s ease; }
.mp-docs-card:hover { border-color: var(--mp-accent); }
.mp-docs-card__title { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--mp-ink); }
.mp-docs-card__excerpt { margin: 0; font-size: .9rem; color: var(--mp-muted); }

/* Article body + help footer + prev/next */
.mp-docs-article { max-width: 760px; }
/* Body lists sit flush with the article's left edge: the bullet/number hangs at
   the body edge (same column as the paragraph text) and the item text takes a
   small hanging indent so wrapped lines clear the marker. The browser default
   indents lists 40px (2.5em); this pulls them back to the edge. */
.mp-docs-article ul, .mp-docs-article ol { padding-inline-start: 1.1em; }
.mp-docs-help { margin-top: 2.5rem; padding: 1.1rem; border: 1px solid var(--mp-hair); border-radius: 12px; }
.mp-docs-adjacent { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.mp-docs-adjacent__prev { text-align: left; }
.mp-docs-adjacent__next { margin-left: auto; text-align: right; }

/* Search empty state */
.mp-docs-empty { padding: 2rem 0; color: var(--mp-muted); }

/* Featured articles on the docs root */
.mp-docs-featured-title { font-size: 1.4rem; margin: 0 0 1.25rem; color: var(--mp-ink); }
.mp-docs-card__cat { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mp-muted); }