/********************************************************************

    DETAILS
	
*********************************************************************/

details
	{
	--detail-lighten: 0%;
	background-color: color-mix(in srgb, var(--clr_Panel_Background), white var(--detail-lighten));
	color: var(--clr_Panel_Text);
	border-radius: var(--DefaultBorderRadius);
	padding: 6px 1em 6px 1em;
	box-shadow: var(--DefaultBoxShadow);
	margin-bottom: 12pt;
	clear: both;
	}

details summary
	{
	padding: 4px;
	cursor: pointer;
	}

/* AI: How far a nested panel may lighten before its text stops being legible
   depends on the palette, so the amounts are themed in 02.SiteColors.css
   rather than fixed here. Nesting is also cued by the padding, radius and
   shadow above, so a small colour step is enough. */
details details                         { --detail-lighten: var(--detail-lighten-base); }
details details details                 { --detail-lighten: calc(var(--detail-lighten-base) + var(--detail-lighten-step)); }
details details details details         { --detail-lighten: calc(var(--detail-lighten-base) + var(--detail-lighten-step) * 2); }
details details details details details { --detail-lighten: calc(var(--detail-lighten-base) + var(--detail-lighten-step) * 3); }