/*
 * Styling for what the design system has no component for.
 * Every value comes from a design system token, so light and dark both work.
 */

/* Headings written for their semantics inside a component keep that
   component's typography instead of the browser default. */
:is(h1, h2, h3, h4, h5, h6):not(nldd-rich-text :is(h1, h2, h3, h4, h5, h6)) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

/* The trigger for the section navigation only exists while the sidebar is
   collapsed into its sheet. */
.sidebar-trigger {
	display: none;
	margin-block-end: var(--primitives-space-16);
}

nldd-sidebar-section[collapsed] .sidebar-trigger {
	display: block;
}

.page-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--primitives-space-12);
}

/* A checklist is a list of outcomes to tick off; the items are not submitted. */
nldd-rich-text ul.checklist {
	list-style: none;
	padding-inline-start: 0;
}

nldd-rich-text ul.checklist > li {
	display: flex;
	align-items: flex-start;
	gap: var(--primitives-space-12);
}

nldd-rich-text ul.checklist > li > span {
	min-width: 0;
	margin: 0;
}

/* Collapsible tips. The design system has no disclosure component for
   running text (checked against 0.8.94), so this is a native details. */
nldd-rich-text details.expander {
	/* Rich text shrinkwraps what it does not know; this reads at the text measure. */
	grid-column: main;
	justify-self: stretch;
	border: var(--semantics-surfaces-border-width) solid var(--semantics-surfaces-tinted-border-color);
	border-radius: var(--semantics-surfaces-corner-radius);
	background-color: var(--semantics-surfaces-tinted-background-color);
}

nldd-rich-text details.expander > summary {
	padding: var(--primitives-space-12) var(--primitives-space-16);
	font: var(--primitives-font-body-md-semi-bold-snug);
	cursor: pointer;
}

nldd-rich-text details.expander > summary:focus-visible {
	outline: var(--semantics-focus-ring-outline);
	outline-offset: var(--semantics-focus-ring-outline-offset);
	border-radius: var(--semantics-surfaces-corner-radius);
}

nldd-rich-text details.expander > :not(summary) {
	margin-inline: var(--primitives-space-16);
}

nldd-rich-text details.expander > :last-child:not(summary) {
	margin-block-end: var(--primitives-space-16);
}

/* The activity indicator fills its parent, so the parent needs a height. */
.cluster-progress {
	min-height: 12rem;
}