/*
 * The gear block.
 *
 * Every colour and measure reads a theme token with a HARD FALLBACK, so the
 * component looks deliberate on a site that has never heard of np-theme —
 * including the two regional sites before their cutover — and inherits the
 * brand the moment it is on one that has.
 *
 * Three traps are paid for explicitly here; do not "simplify" any of them.
 * START-HERE.md §7.
 */

.np-gear {
	--npg-gap: var(--np-space-sm, .75rem);
	margin: var(--np-space-lg, 2.5rem) 0;
	padding: var(--np-space-md, 1.5rem);
	background: var(--np-paper-soft, #f4f2ed);
	border: 1px solid var(--np-line, rgba(0, 0, 0, .12));
	border-radius: var(--np-radius, 10px);
	font-family: var(--np-body-stack, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--np-ink, #1d2321);
}

/*
 * TRAP 1. `[hidden]` is a User Agent rule and loses to ANY author `display`
 * declaration — and a theme that says `section { display: block }` silently
 * un-hides every toggled group. The attribute stays, because it is what takes
 * the group out of the accessibility tree; this makes it stick.
 */
.np-gear [hidden] {
	display: none !important;
}

.np-gear__title {
	margin: 0 0 .35em;
	font-family: var(--np-display-stack, var(--np-body-stack, Georgia, serif));
	font-size: var(--np-text-xl, 1.35rem);
	line-height: 1.2;
}

.np-gear__prompt {
	margin: 0 0 var(--npg-gap);
	font-size: var(--np-text-sm, .9rem);
	color: var(--np-ink-soft, #55605c);
}

.np-gear__toggles {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: var(--np-space-md, 1.5rem);
}

/*
 * TRAP 2. A <button> inherits NEITHER font NOR background. The UA gives it
 * `buttonface` chrome and its own font family, and neither comes from an
 * ancestor — so a control styled and eyeballed as an <a> falls back to a grey
 * system button wherever a real button uses it. That shipped to production on
 * the trip planner's Print control and lived there for weeks. Both are set
 * here, on the element itself.
 */
.np-gear__toggle {
	font: inherit;
	font-size: var(--np-text-sm, .9rem);
	line-height: 1.1;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 0;
	padding: .55em .9em;
	background: var(--np-paper, #fff);
	color: var(--np-ink, #1d2321);
	border: 1px solid var(--np-line, rgba(0, 0, 0, .25));
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.np-gear__toggle:hover {
	border-color: var(--np-ink-soft, #55605c);
}

.np-gear__toggle[aria-pressed="true"] {
	background: var(--np-brand, #23343d);
	color: var(--np-on-brand, #fff);
	border-color: var(--np-brand, #23343d);
}

/*
 * TRAP 3. A single-colour focus ring measured 1.05:1 on filled bands in all
 * three brands while every text pair passed, because nothing was checking the
 * ring. Two tones: an outline AND a box-shadow, so one of them always has
 * contrast whatever it lands on. contrast.php asserts both are present.
 */
.np-gear__toggle:focus-visible,
.np-gear__link:focus-visible {
	outline: 2px solid var(--np-ink, #1d2321);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--np-paper, #fff);
}

.np-gear__count {
	font-size: .8em;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.np-gear__group + .np-gear__group {
	margin-top: var(--np-space-md, 1.5rem);
}

.np-gear__group-title {
	margin: 0 0 .25em;
	font-size: var(--np-text-base, 1rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--np-ink-soft, #55605c);
}

.np-gear__note {
	margin: 0 0 .5em;
	font-size: var(--np-text-sm, .9rem);
	color: var(--np-ink-soft, #55605c);
}

/*
 * The reset only de-bullets `ul[class]`, and this one has a class, but the two
 * regional sites still run the old theme — so it is set here rather than
 * assumed.
 */
.np-gear__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.np-gear__item {
	margin: 0;
}

.np-gear__link {
	display: block;
	padding: .5em .7em;
	background: var(--np-paper, #fff);
	border: 1px solid var(--np-line, rgba(0, 0, 0, .12));
	border-radius: var(--np-radius, 8px);
	color: var(--np-ink, #1d2321);
	text-decoration: none;
}

.np-gear__link:hover {
	text-decoration: underline;
	border-color: var(--np-ink-soft, #55605c);
}

.np-gear__disclosure {
	margin: var(--np-space-md, 1.5rem) 0 0;
	font-size: var(--np-text-xs, .8rem);
	color: var(--np-ink-soft, #55605c);
}

.np-gear__empty {
	margin: 0;
	font-size: var(--np-text-sm, .9rem);
	color: var(--np-ink-soft, #55605c);
}

@media (prefers-reduced-motion: reduce) {
	.np-gear__toggle { transition: none; }
}

/*
 * The concept names the row; the specific pick, when we have one, sits under
 * it in a quieter voice. A reader scanning for what to bring reads the first
 * line; a reader deciding what to buy reads the second.
 */
.np-gear__what {
	display: block;
}

.np-gear__pick {
	display: block;
	margin-top: .15em;
	font-size: var(--np-text-xs, .78rem);
	color: var(--np-ink-soft, #55605c);
	line-height: 1.3;
}