.nonotami-toc {
	/* Its own alignment, not inherited from wherever it's placed (the
	   sidebar's own default is centered, for content that doesn't set
	   its own — see css/layout.css) — nested and left-aligned, same as
	   in-content, in a sidebar or not. */
	text-align: left;
	width: var(--toc-width, 80%);
	margin: 1.5rem auto;
	box-sizing: border-box;
	border-width: var(--toc-border-width, 1px);
	border-style: solid;
	/* Theme's own body text color, not a flat black — so an admin who
	   hasn't picked a custom border color still gets one that's visible
	   in both light and dark mode instead of a black line on a dark page. */
	border-color: var(--toc-border-color, var(--nonotami-color-body, #000));
	border-radius: 6px;
	overflow: hidden;
}

/* The width % setting only governs the in-content box — a sidebar is
   already narrow, so the widget always goes full width with padding.
   It's also always expanded (no toggle) and borderless: a plain
   centered title over a nested list, not a card. */
.nonotami-toc.is-widget {
	width: 100%;
	margin: 0 0 1.5rem;
	border: none;
	border-radius: 0;
}

.nonotami-toc.is-widget > .nonotami-toc-title {
	text-align: center;
	font-weight: 700;
	padding: 0 0 0.5rem;
}

.nonotami-toc.is-widget .nonotami-toc-panel {
	max-height: none;
	/* No left padding here — h2 (the top-level list) is the base, flush
	   with the title above it, not already indented before nesting even
	   starts. .nonotami-toc-sublist's own padding-left is what actually
	   indents anything nested under it. */
	padding: 0;
}

.nonotami-toc-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	/* The arrow stays pinned to the right (flex-end), while the title
	   between it and the empty space on the left centers itself within
	   whatever room that leaves — same centered-title look as the
	   widget's own plain title, just with the toggle arrow still in its
	   usual spot. */
	justify-content: flex-end;
	gap: 10px;
	background: none;
	border: none;
	padding: 0.75rem 1rem;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	text-align: center;
	/* A <button> does NOT inherit `color` by default (it gets the
	   browser/OS's own button text color instead) — without this it stays
	   whatever that system color is regardless of the theme's own colors,
	   light or dark mode alike. */
	color: inherit;
}

.nonotami-toc-title {
	flex: 1 1 auto;
}

.nonotami-toc-arrow {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.2s ease;
}

.nonotami-toc.is-collapsed .nonotami-toc-arrow {
	transform: rotate(-90deg);
}

.nonotami-toc-panel {
	max-height: 2000px;
	overflow: hidden;
	padding: 0 1rem 1rem;
	transition: max-height 0.2s ease, padding 0.2s ease;
}

.nonotami-toc.is-collapsed .nonotami-toc-panel {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.nonotami-toc-list,
.nonotami-toc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nonotami-toc-list > li {
	margin-bottom: 0.4rem;
}

.nonotami-toc-sublist {
	padding-left: 1.25rem;
	margin-top: 0.3rem;
}

.nonotami-toc-list a {
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: break-word;
	/* The browser's own scrollIntoView() (js/table-of-contents-frontend.js
	   scrolling the active item into view) honors this natively, in any
	   scroll container — the page itself or the sidebar's own internal
	   scroll region alike. --nonotami-footer-height (inc/sticky.php) is
	   the sticky footer's real measured height, 0px whenever the footer
	   isn't sticky, so this is a no-op then. Without it, a sticky footer
	   can visually sit on top of an item this scrolled flush to the very
	   bottom edge, even though it's technically "in view". */
	scroll-margin-bottom: var( --nonotami-footer-height, 0px );
}

.nonotami-toc-list a:hover {
	text-decoration: underline;
}

.nonotami-toc-list a.is-active {
	font-weight: 700;
}