/*
 * Layer: templates. The wide page (no kit page; plan §6 design gap, kit-derived): the index head
 * of pages/library.html and courses.html (title with the red full stop) over the full content
 * width, no rail. Used by 8 PMPro screens (their look is components/pmpro.css; login reads as
 * the centred article page instead — inc/template-hierarchy.php) and by
 * Discussions (page 80), where only the wrapper is styled: Simple:Press's sp-* sheets stay
 * unlayered and own everything inside #spMainContainer.
 */
@layer templates {

	/* Prose sizes suit the PMPro copy; the 820px reading column does not, so the body spans the head's row. */
	.nd-wide .nd-wide__body {
		max-width: none;
	}

	/* Running copy keeps the reading measure; plates, forms and the forum use the full row. */
	.nd-wide__body > :is(p, ul:not([class]), ol, h2, h3) {
		max-width: 820px;
	}

	.nd-wide .nd-index__head {
		margin-block-end: 48px;
	}

	/* Discussions (Simple:Press). The forum and its widgets sit on porcelain in a white plate. */
	.nd-wide__body > #spMainContainer,
	.nd-wide__body > #dialogcontainer + #spMainContainer {
		box-sizing: border-box;
		padding: 32px;
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow:
			0 0 0 1px var(--wp--preset--color--line),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px color-mix(in srgb, var(--wp--preset--color--glass-border) 30%, var(--wp--preset--color--line));
	}

	/*
	 * M15: SP's icon buttons (Members, Inbox, Profile, Log Out, Group/All RSS) put a <br> between
	 * the icon and the label inside a fixed 21px-high box, so the label hangs below the box and over
	 * "Last visited"; its "next page" arrow link ends in a <br> too, which pushes the last page number
	 * onto a second line. SP's unlayered sheet never styles <br>, so this layered rule needs no
	 * !important: icon and label share one line, inside the box.
	 */
	.nd-wide__body #spMainContainer :is(a.spButton, .spPageLinks a.spIcon) > br {
		display: none;
	}

	/* Legacy Customizer CSS (post 5298, nourishingdestiny/extended), carried here: the lock drops custom CSS outside Local. */
	.spStatsSection {
		overflow: hidden;
	}

	/* Utils' widgets below the forum (class-community.php discussions()): recent posts and the forum picker. */
	.nd-wide__body > section:has(> .spListTag, > #spForumDropdownTag) {
		padding-block-start: 32px;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.nd-wide__body > section > h2 {
		margin: 0 0 20px;
		font-size: min(36px, var(--wp--preset--font-size--display-s));
	}

	.nd-wide__body .spListTag {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nd-wide__body .spListItemTag {
		margin: 0;
		padding: 20px 22px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--preset--border-radius--panel);
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.nd-wide__body .spListItemTag .spLinkTag {
		color: var(--wp--preset--color--brand-deep);
		font-weight: 600;
		text-decoration: none;
	}

	.nd-wide__body .spListItemTag .spLinkTag:hover {
		color: var(--wp--preset--color--brand);
		text-decoration: underline;
	}

	.nd-wide__body .spListItemTag .spTextTag {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--meta);
	}

	.nd-wide__body #spForumDropdownTag select {
		width: min(100%, 420px);
	}

	@media (max-width: 1100px) {

		.nd-wide__body > #spMainContainer {
			padding: 16px;
		}
	}
}