/*
 * The tools bar in the masthead.
 *
 * Loaded on every front-end page, which is the whole reason it is small and
 * why it is here rather than in `tools.css`: a reader on an essay gets the
 * navigation and nothing else. No engine, no runtime, no card grid.
 *
 * Everything below hangs off the theme's own variables with a hard-coded
 * fallback, so switching style variation under Appearance -> Editor -> Styles
 * repaints the bar with the rest of the site.
 *
 * NAMESPACE: `adb-nav*` for the bar, `adb-menu*` for a dropdown. Not `adb-bar`
 * and not `adb-drop` — tools.css already owns both of those (`.adb-bar` is the
 * progress meter in a tool's result panel, `.adb-drop` is the file drop zone),
 * and this file loads on the very pages where that one does. The first version
 * took both names and the masthead inherited `height: 6px; overflow: hidden`
 * from the progress bar on every page that mattered. build.ps1 now fails on a
 * class declared in both stylesheets, so this cannot come back quietly.
 */

.adb-nav {
	/* Mirrors ADB_Tools_Art::TEAL / WASH / DEEP. The drawn plates and these
	   icons are one family of pictures; change the palette in both places or
	   the menu stops matching the cards it leads to. build.ps1 checks. */
	--adb-teal: #12807A;
	--adb-wash: #E4F3F1;
	--adb-deep: #0B4F4A;

	--adb-paper: var(--paper, #FAF7F2);
	--adb-surface: var(--paper-deep, #F1EADE);
	--adb-ink: var(--ink, #121212);
	--adb-faded: var(--ink-faded, #57524A);
	--adb-accent: var(--vermillion, #C4260E);
	--adb-rule: var(--rule, #D6CCBC);

	position: relative;
	z-index: 40;
	border-top: 1px solid var(--adb-rule);
	background: var(--adb-surface);
}

/*
 * `center`, not `stretch`.
 *
 * With `stretch` every link inherited the height of the tallest flex item, and
 * the tallest item was a dropdown whose panel was still being laid out while
 * shut — so the three quick links were measured at 186px tall inside a bar
 * that is supposed to be 44. The panel is out of flow now (see below); this
 * makes the row's height depend on the links alone regardless.
 */
.adb-nav__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--sp-30, 1.25rem);
}

/* --- What sits on the bar ------------------------------------------------ */

/*
 * Same letters as the masthead nav above it, so the two rows read as one
 * object. 44px minimum, which on this site is a rule and not a preference:
 * the reader is on a phone and these are the links that matter.
 */
.adb-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	padding-block: 0.25rem;
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--adb-ink);
	white-space: nowrap;
	cursor: pointer;
}

.adb-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0.55rem;
	height: 2px;
	background: var(--adb-accent);
	transition: right 180ms ease;
}

.adb-nav__link:hover::after,
.adb-menu[open] > .adb-nav__link::after { right: 0; }

.adb-nav__link:focus-visible {
	outline: 2px solid var(--adb-accent);
	outline-offset: 3px;
}

.adb-nav__chev { transition: transform 180ms ease; }
.adb-menu[open] > .adb-nav__link .adb-nav__chev { transform: rotate(180deg); }

/* --- The disclosure ------------------------------------------------------ */

/*
 * Leave the <details> element's own display alone.
 *
 * It was `display: flex` here, and the shut panel was laid out anyway — 544px
 * of menu measured with `open === false`, clipped by the masthead into a strip
 * of teal that looked like a fault in the page. Whatever the engine does with
 * its internal slot is not something to lean on, so the rule below states the
 * closed state outright instead of inferring it.
 */
.adb-menu > .adb-menu__panel { display: none; }
.adb-menu[open] > .adb-menu__panel { display: block; }

/* The browser's own triangle, in two dialects. Without both, Safari keeps it. */
.adb-menu > summary {
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

.adb-menu > summary::-webkit-details-marker { display: none; }
.adb-menu > summary::marker { content: ""; }

.adb-menu__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	max-height: min(82vh, 32rem);
	overflow-y: auto;
	padding-block: var(--sp-30, 1.25rem) var(--sp-20, 0.875rem);
	background: var(--adb-paper);
	border-top: 1px solid var(--adb-rule);
	border-bottom: 2px solid var(--adb-ink);
	box-shadow: 0 18px 40px -24px rgba(18, 18, 18, 0.45);
	animation: adb-menu-in 140ms ease-out;
}

@keyframes adb-menu-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.adb-menu__panel { animation: none; }
	.adb-nav__chev,
	.adb-nav__link::after { transition: none; }
}

/*
 * auto-FILL, not auto-fit.
 *
 * Six groups want six columns. The Convert panel only has two, and auto-fit
 * collapses the four it is not using and stretches the rest - two 600px
 * columns holding one short word each. auto-fill keeps the empty tracks, so
 * both panels put a group in the same place and the narrow one simply stops.
 */
.adb-menu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	align-items: start;
	gap: var(--sp-30, 1.25rem) var(--sp-30, 1.25rem);
}

.adb-menu__head {
	margin: 0 0 0.5rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid var(--adb-rule);
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adb-faded);
}

.adb-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adb-menu__tool {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.35rem 0.5rem;
	margin-inline: -0.5rem;
	text-decoration: none;
	color: inherit;
}

/*
 * The teal square.
 *
 * It is the same palette the drawn plates use, so a tool looks like itself in
 * the menu and on the card. Flat wash behind a line glyph rather than a second
 * copy of the plate: 29 full illustrations in a masthead on every page of the
 * site would be a real weight for a picture nobody is looking at yet.
 */
.adb-menu__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--adb-wash);
	color: var(--adb-teal);
	border: 1px solid transparent;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.adb-menu__ico .adb-icon { width: 16px; height: 16px; }

.adb-menu__text {
	min-width: 0;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
}

.adb-menu__tool:hover,
.adb-menu__tool:focus-visible {
	background: var(--adb-ink);
	color: var(--adb-paper);
	outline: none;
}

.adb-menu__tool:hover .adb-menu__ico,
.adb-menu__tool:focus-visible .adb-menu__ico {
	background: var(--adb-deep);
	color: var(--adb-paper);
	border-color: var(--adb-deep);
}

.adb-menu__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-20, 0.875rem);
	margin-top: var(--sp-30, 1.25rem);
	padding-top: var(--sp-20, 0.875rem);
	border-top: 1px solid var(--adb-rule);
}

.adb-menu__note {
	margin: 0;
	font-size: var(--fs-small, 0.8125rem);
	color: var(--adb-faded);
}

.adb-menu__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--adb-ink);
}

/* --- The home page's filter ---------------------------------------------- */

/*
 * Twenty-nine cards is past the point where a reader scans; it is the point
 * where they look for the one they came for. The field is rendered by the
 * shortcode and wired by menu.js — with script off it hides itself, because a
 * box that does nothing is worse than no box.
 */
.adb-filter {
	display: none;
	align-items: center;
	gap: 0.6rem;
	margin-top: var(--sp-30, 1.25rem);
	padding: 0.35rem 0.35rem 0.35rem 0.85rem;
	border: 1px solid var(--rule, #D6CCBC);
	background: var(--paper, #FAF7F2);
}

.adb-filter.is-ready { display: flex; }

.adb-filter svg { flex: none; color: var(--ink-faded, #57524A); }

.adb-filter input {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	border: 0;
	background: transparent;
	font-family: var(--sans);
	font-size: var(--fs-small, 0.8125rem);
	color: var(--ink, #121212);
}

.adb-filter input:focus { outline: none; }
.adb-filter:focus-within { border-color: var(--ink, #121212); }

.adb-filter__count {
	flex: none;
	padding-right: 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faded, #57524A);
}

/* A group whose every card was filtered out takes its heading with it. */
.adb-tools__group[hidden],
.adb-card[hidden] { display: none !important; }

/* --- Small screens ------------------------------------------------------- */

/*
 * The panel stops floating and becomes an accordion inside the bar. An
 * absolutely-positioned mega panel on a 360px screen is a full-height overlay
 * with no obvious way out; opening in place keeps the close control exactly
 * where the reader's thumb already is.
 */
@media (max-width: 781px) {
	.adb-nav__inner {
		flex-wrap: wrap;
		gap: 0 var(--sp-30, 1.25rem);
		padding-block: 0.15rem 0.35rem;
	}

	.adb-menu {
		flex: 1 0 100%;
		display: block;
	}

	.adb-menu__panel {
		position: static;
		max-height: none;
		overflow: visible;
		border-bottom: 0;
		box-shadow: none;
		background: transparent;
		padding-block: 0.5rem var(--sp-20, 0.875rem);
	}

	.adb-menu__grid {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.adb-menu__foot { padding-inline: 0; }
}