/**
 * OGS Step Files — download browser
 *
 * Built on Automatic.css 3.3.6 variables. No hardcoded colours, sizes, or
 * spacing: change the ACSS dashboard and this follows.
 *
 * Notes on ACSS integration:
 *  - Scroll offset for anchor links is handled by ACSS's own [id] rule
 *    (scroll-margin-top: var(--offset)), so nothing is set here.
 *  - Heading margins are already reset by ACSS, so vertical rhythm is
 *    controlled explicitly below.
 *  - Categories render as divs, not sections: ACSS gives bare <section>
 *    elements full section padding and centre alignment.
 *  - The jump chips deliberately do NOT use .btn--* classes: ACSS buttons
 *    carry --btn-min-width: 8.75rem, far too wide for a chip row.
 *
 * To retheme, override a variable on the wrapper rather than editing rules
 * here, e.g.  .tx-sf { --tx-sf-icon-size: 1.2em; }
 */

.tx-sf {
	/* Icon paths are relative to this stylesheet. */
	--tx-sf-icon-file: url("step-download.svg");
	--tx-sf-icon-zip: url("step-zip.svg");
	--tx-sf-icon-size: 1.5em;

	font-family: var(--text-font-family);
	color: var(--text-color);
}

.tx-sf *,
.tx-sf *::before,
.tx-sf *::after {
	box-sizing: border-box;
}

/* ── jump strip ─────────────────────────────────────────────────────────── */

.tx-sf-jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-block-end: var(--space-s);
}

.tx-sf-jump-btn {
	font-size: var(--text-s);
	line-height: var(--btn-line-height);
	padding-block: var(--btn-padding-block);
	padding-inline: var(--btn-padding-inline);
	border: var(--border-width) var(--border-style) var(--border-color-dark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text-dark);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--transition);
}

.tx-sf-jump-btn:hover {
	background: var(--neutral-ultra-light);
	border-color: var(--primary);
}

.tx-sf-jump-btn.is-active {
	background: var(--primary-ultra-light);
	border-color: var(--primary);
	color: var(--primary-dark);
}

.tx-sf-jump-btn:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* ── search ─────────────────────────────────────────────────────────────── */

.tx-sf-search {
	display: flex;
	gap: var(--space-xs);
	margin-block-end: 0.5em;
}

.tx-sf-input {
	flex: 1;
	min-inline-size: 0;
	font-size: var(--text-m);
	padding-block: 0.6em;
	padding-inline: 0.85em;
	border: 2px solid var(--neutral);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--text-dark);
	text-align: left;
}

.tx-sf-input::-webkit-search-cancel-button {
	cursor: pointer;
}

.tx-sf-input:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
	border-color: var(--primary);
}

.tx-sf-clear {
	font-size: var(--text-s);
	padding-inline: var(--btn-padding-inline);
	border: var(--border-width) var(--border-style) var(--border-color-dark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text-dark);
	cursor: pointer;
	transition: var(--transition);
}

.tx-sf-clear:hover {
	background: var(--neutral-ultra-light);
}

.tx-sf-note {
	font-size: var(--text-m);
	font-weight: 400;
	color: var(--text-dark-muted);
	margin-block: 0 var(--space-s);
	text-align: left;
}

/* ── categories ─────────────────────────────────────────────────────────── */

.tx-sf-cat {
	margin-block-end: var(--space-l);
}

.tx-sf-cat-title {
	font-family: var(--heading-font-family);
	font-size: var(--h4);
	font-weight: var(--heading-font-weight);
	line-height: var(--heading-line-height);
	color: var(--heading-color);
	margin-block-end: 0.15em;
	text-align: left;
}

.tx-sf-cat-meta {
	font-size: var(--text-s);
	color: var(--neutral-semi-dark);
	margin-block-end: 0.65em;
	text-align: left;
}

.tx-sf-card {
	background: var(--light-card-background);
	border: var(--card-border-width) var(--card-border-style) var(--light-card-border-color);
	border-radius: var(--card-radius);
	overflow: hidden;
}

/* ── series accordion ───────────────────────────────────────────────────── */

.tx-sf-series-wrap + .tx-sf-series-wrap .tx-sf-series {
	border-block-start: var(--divider);
}

.tx-sf-series {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	inline-size: 100%;
	font-size: var(--text-m);
	font-weight: 500;
	text-align: start;
	padding-block: 0.7em;
	padding-inline: var(--space-s);
	border: 0;
	background: transparent;
	color: var(--text-dark);
	cursor: pointer;
	transition: var(--transition);
}

.tx-sf-series:hover {
	background: var(--neutral-ultra-light);
}

.tx-sf-series:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: calc(var(--focus-offset) * -1);
}

.tx-sf-series-name {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-inline-size: 0;
}

.tx-sf-chev {
	flex: none;
	inline-size: 0;
	block-size: 0;
	border-block-start: 0.32em solid transparent;
	border-block-end: 0.32em solid transparent;
	border-inline-start: 0.38em solid var(--primary);
	transition: rotate var(--transition-duration) var(--transition-timing);
}

.tx-sf-series.is-open .tx-sf-chev {
	rotate: 90deg;
}

.tx-sf-files {
	padding-block-end: 0.5em;
	padding-inline: var(--space-xs);
}

/* ── show more ──────────────────────────────────────────────────────────── */

.tx-sf-more {
	display: block;
	inline-size: 100%;
	font-size: var(--text-s);
	font-weight: 500;
	text-align: center;
	padding-block: 0.85em;
	border: 0;
	border-block-start: var(--divider);
	background: transparent;
	color: var(--primary);
	cursor: pointer;
	transition: var(--transition);
}

.tx-sf-more:hover {
	background: var(--primary-ultra-light);
}

.tx-sf-more:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: calc(var(--focus-offset) * -1);
}

/* ── file rows ──────────────────────────────────────────────────────────── */

.tx-sf-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	padding-block: 0.6em;
	border-block-end: var(--divider);
	font-size: var(--text-s);
	color: var(--text-dark);
	text-decoration: none;
	transition: var(--transition);
	padding: .5em;
}

.tx-sf-row:last-child {
	border-block-end: 0;
}

.tx-sf-row:hover {
	background: var(--neutral-light-trans-20);
	color: var(--link-color);
}

.tx-sf-row:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.tx-sf-row--all {
	font-weight: 600;
	padding: .25em var(--space-xs);
	border-radius: var(--radius);
	background: var(--primary-light-trans-30);
	border: none;
	margin-bottom: 1em;
	margin-top: 1em;
}
.tx-sf-label {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.tx-sf-right {
	display: flex;
	align-items: center;
	gap: 0.85em;
	flex: none;
}

.tx-sf-meta {
	font-size: var(--text-s);
	color: var(--neutral-semi-dark);
	white-space: nowrap;
}

/* ── icons ──────────────────────────────────────────────────────────────── */

/**
 * Masked rather than inlined, so the SVG supplies the shape and CSS supplies
 * the colour. The source files must be solid filled shapes: a stroke-only SVG
 * masks to nothing.
 */
.tx-sf-icon {
	flex: none;
	inline-size: var(--tx-sf-icon-size);
	block-size: var(--tx-sf-icon-size);
	background-color: var(--primary);
	-webkit-mask: var(--tx-sf-icon-file) center / contain no-repeat;
	mask: var(--tx-sf-icon-file) center / contain no-repeat;
	transition: var(--transition);
}

.tx-sf-row--all .tx-sf-icon {
	-webkit-mask-image: var(--tx-sf-icon-zip);
	mask-image: var(--tx-sf-icon-zip);
}

.tx-sf-row:hover .tx-sf-icon {
	background-color: var(--link-color);
}

/* ── results and states ─────────────────────────────────────────────────── */

.tx-sf-results {
	padding-inline: var(--space-s);
}

.tx-sf-empty,
.tx-sf-loading {
	padding: var(--space-m) var(--space-s);
	text-align: center;
	color: var(--neutral-semi-dark);
	font-size: var(--text-m);
	background: var(--light-card-background);
	border: var(--card-border-width) var(--card-border-style) var(--light-card-border-color);
	border-radius: var(--card-radius);
}

/* ── small screens ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.tx-sf-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2em;
	}

	.tx-sf-right {
		inline-size: 100%;
		justify-content: space-between;
	}

	.tx-sf-jump {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -0.5);
		padding-inline: calc(var(--gutter) * 0.5);
	}

	.tx-sf-jump::-webkit-scrollbar {
		display: none;
	}
}