
.box,
/* defined elsewhere */
[role=menu],
.sidebar-layout > header,
[role=tabpanel],
figure,
details,
:where(dialog) {
    margin: var(--gap) 0;
    padding: var(--gap);
    overflow: clip;

    border-radius: var(--border-radius);
    background: var(--box-bg);
    border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
    border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
    border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
    border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
}

.titlebar {
  display: block;

  margin-inline: calc(0px - var(--gap));
  margin-block-end: var(--gap);
  padding-inline: var(--gap);

  font: inherit;
	font-family: var(--secondary-font);
  font-weight: bold;

  background: var(--graphical-fg);
  color: var(--bg);
	text-shadow: 0 .1em .2em var(--fg);
  overflow-y: clip;

  & a {
    color: var(--bg);
  }
}
:is(.box, dialog):has( > .titlebar ) {
  padding-block-start: 0;
}

.sub-title, sub-title {
	/***
	 Meant for use in headings. Make sure to also use visually-hidden punctuation
	 to mark the subtitle as shown below:

	1 | <h1>
	2 | 	Foo Bar<v-h>:</v-h>
	3 | 	<sub-title>How I Learned To Stop Worrying and Love Baz</sub-title>
	4 | </h1>

	1 | <h1>
	2 | 	<sub-title class="-allcaps">Breaking News</sub-title><v-h>:</v-h>
	3 | 	Bad Thing Happens
	4 | <h1>
	 ***/

	display: block;

	font-weight: normal;

	color: var(--muted-fg);
}


.tool-bar, [role=toolbar] {
	display: flex;
	flex-flow: row wrap;
	gap: calc(var(--gap) / 2);

	& > * { margin: 0; }
}

.sidebar-layout {
	& header {
		& li {
			margin-block: calc(.5 * var(--gap));
		}

		& a {
			font-weight: bold;
		}
	}

	@media (min-width: 75ch) {
		display: grid;
		grid-template-columns: 25ch auto;
		inset: 0;

		& > header {
			border-block: none;
			border-inline-start: none;
			margin: 0;
		}

		& > :nth-child(2) {
			overflow: auto;
      scrollbar-width: auto;
			--full-width: calc(100vw - 25ch);
			padding-top: var(--gap);
		}
	}
}

.breadcrumbs[aria-label] {

    font-family: var(--secondary-font);

    &:has([aria-current="page"]) {
      --separator: var(--breadcrumb-page);
    }
    &:has([aria-current="step"]) {
      --separator: var(--breadcrumb-step);
    }

    & ul, & ol {
        padding-inline-start: 0;
    }
    & :is(ul, ol):not([type]) {
        list-style-type: "";
    }

    & li {
        display: inline list-item;
        &:not(:last-child)::after {
            content: var(--separator, var(--breadcrumb-page)) / '';
            content: var(--separator, var(--breadcrumb-page));
            display: inline;
        }
    }

    & [aria-current="page"], & [aria-current="step"] {
        font-weight: bold;
    }
}

.chip, chip {
	font-family: var(--secondary-font);
    border: var(--chip-border-width) var(--chip-border-style) var(--accent);
    background: var(--box-bg);
    border-radius: calc(var(--rhythm, 1rlh) / 2);
    padding-inline: calc(var(--rhythm, 1rlh) / 2);
}

.navbar {
	padding: var(--rhythm, 1rlh);

	font-family: var(--secondary-font);

	background: var(--box-bg);
	border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--accent);

	overflow-x: auto;

	position: sticky;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;

	/* Inner layout */
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: var(--gap);

	&.expanded {
		flex-flow: column;
		align-items: start;

		max-height: 90vh;
		overflow-y: auto;

		& ul[role="list"] { flex-flow: column; }
	}

	& * {
		flex-shrink: 0;
		margin-block: 0;
	}

	&:not(.expanded) {
		& > :first-child, & nav > :first-child { margin-inline-start: auto; }
		& >  :last-child, & nav >  :last-child { margin-inline-end:   auto; }
	}

	& hr { align-self: stretch; }

	& nav ul[role="list"] {
		display: flex;
		flex-flow: row;
		gap: var(--rhythm, 1rlh);

		& * { flex-shrink: 0 }
	}

	& nav ul[role="list"] {
		padding-inline-start: 0;
	}

	& :is(a:not(.\<button\>, .chip), .\<a\>) {
		font-weight: bold;
		text-decoration: none;
		padding-inline: .2em;

	  &:hover, &:focus {
  		text-decoration: underline;
    }
	}

	& [aria-current=page] {
		position: relative;
	}

	& [aria-current=page]::after {
		width: 100%;
		height: 6px;
		content: "";
		display: block;
		position: absolute;
		bottom: calc(-1 * var(--gap));
		background: currentcolor;
	}

	&.expanded [aria-current=page]::after {
		width: 6px;
		height: 100%;
		position: absolute;
		left: calc(-1 * var(--gap));
		top: 0;
	}
}

.permalink-anchor {
    display: none;

    *:hover > & {
        display: initial;
    }
}

.iconbutton {
	border: none;
	background: none;
	color: currentcolor;
	padding: 0;
	box-shadow: none;
	line-height: var(--rhythm, 1rlh);
	font-size: 24px;  /* WCAG target size AA */
	width: 24px;
	height: 24px;
	text-align: center;
	border-radius: 50%;
	transition: font-weight .2s ease-in-out;

	&:hover, &:focus-visible {
		box-shadow: none;
		outline: var(--interactive-border-width) var(--interactive-border-style) var(--accent);
		outline-offset: 6px;
	}

	&:active {
		box-shadow: none;
		outline-offset: 3px;
		background: none;
	}

	&[aria-pressed=true] {
		box-shadow: none;
		transform: none;
	}

  &:is(.plain, .info, .ok, .warn, .bad) {
    color: var(--accent);
  }

  &:is(.big, .\<big\>) {
    /* WCAG target size AAA */
    font-size: 44px;
    width: 44px;
    height: 44px;
    padding-inline: 0;
  }
}
