/**
 * Tool stage head — white title band + export toolbar (all theme tools).
 */

.sn-page-card--tool-stage-headed {
	overflow: hidden;
}

/*
 * Tool stage → content: tighten the gap under the viewport.
 * Avoid a large empty band + hairline that reads as a “dead divider”.
 * Keep audio/PDF full-viewport tools on their own spacing (see shells).
 */
.sn-page-card--tool-stage.sn-page-card--tool-stage-headed {
	margin-bottom: 1rem;
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc {
	padding-bottom: 1.25rem;
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt {
	padding-bottom: 1.25rem;
	background: transparent;
}

@media (min-width: 640px) {
	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc {
		padding-bottom: 1.5rem;
	}

	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt {
		padding-bottom: 1.5rem;
	}
}

/* Split tools: fill the gray viewport; do not leave a blank strip under columns. */
.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__layout {
	margin-bottom: 0;
}

/*
 * Collapse review wrappers that only contain a hidden Rate & Review widget
 * (border-top + margin otherwise look like an empty divider under the tool).
 */
.sn-page-card--tool-stage-headed :is( .sn-uuid-review, .sn-currency-converter .sn-tool-rate-review ):not( :has( [data-sn-tool-review]:not( [hidden] ) ) ) {
	display: none !important;
}

.sn-tool-stage-head {
	padding: 1.25rem 1.25rem 1rem;
	background: #fff;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.sn-tool-stage-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

.sn-tool-stage-head__main {
	min-width: 0;
	flex: 1 1 14rem;
}

.sn-tool-stage-head__title {
	margin: 0;
}

.sn-tool-stage-head .sn-article-meta {
	margin-top: 0.625rem;
}

.sn-tool-stage-head__export {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sn-tool-stage-head__export[hidden] {
	display: none !important;
}

.sn-tool-stage-head__export .sn-calc-export {
	margin: 0;
}

@media (min-width: 640px) {
	.sn-tool-stage-head {
		padding: 1.5rem 1.5rem 1.15rem;
	}
}

@media (min-width: 1024px) {
	.sn-tool-stage-head {
		padding: 1.75rem 2rem 1.25rem;
	}
}

/* Content-card H2 subtitle (no author/date) — matches blog card title weight. */
.sn-article-head--tool-content {
	margin-bottom: 1.5rem;
}

.sn-page-card__title--sub {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--color-text, #1a1a1a);
}

@media (min-width: 640px) {
	.sn-page-card__title--sub {
		font-size: 1.375rem;
	}
}

@media (max-width: 480px) {
	.sn-tool-stage-head__export {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}
}

/*
 * Split calculator / converter layouts.
 * Mobile stays column + stretch so results keep full width (flex-start collapses
 * min-width:0 result panels to ~0px content width on small screens).
 * Desktop row: top-align input/result columns.
 * Full-bleed audio/PDF editors keep their own viewport rules below.
 */
.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__layout {
	align-items: stretch;
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__inputs,
.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__results {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__layout {
		align-items: flex-start;
		gap: 1.5rem;
	}

	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__inputs {
		width: 380px;
		max-width: 380px;
		align-self: flex-start;
	}

	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-ci-calc__results {
		width: auto;
		max-width: none;
		align-self: stretch;
	}

	/*
	 * Grid-based split tools (e.g. URL): fill the track.
	 * Shared .sn-ci-calc__inputs is 380px for flex calculators — override when
	 * the layout is CSS grid so the first column is not an empty gutter.
	 * UUID uses the calculator flex pattern (380px inputs) — do not override.
	 */
	.sn-page-card--tool-stage-headed .sn-ci-calc__layout.sn-url-workspace .sn-ci-calc__inputs {
		width: auto;
		max-width: none;
	}
}

/* Writing tools — symmetric two-column panels inside gray viewport. */
.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt-grid-2 {
	align-items: stretch;
}

@media (min-width: 768px) {
	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt-grid-2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.5rem;
	}
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt-panel {
	height: 100%;
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-editor] ) ):not( :has( [data-audio-editor] ) ) .sn-wrt-panel {
	padding: 1.25rem;
	border: 1px solid var(--sn-ci-panel-border, #ced4da);
	border-radius: 8px;
	background-color: var(--sn-ci-panel-bg, #e9ecef);
	background-image: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	height: auto;
}

.sn-page-card--tool-stage-headed .sn-wrt-panel__title,
.sn-url-results__title {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
	color: var(--color-text, #1a1a1a);
}

/* Calculators: export lives in stage head — hide duplicate toolbar in result headers. */
.sn-page-card--tool-stage-headed .sn-ci-calc__results-head .sn-calc-export,
.sn-page-card--tool-stage-headed .sn-calc-results-head .sn-calc-export,
.sn-page-card--tool-stage-headed [data-calc-result-heading] + .sn-calc-export,
.sn-page-card--tool-stage-headed .sn-calc-result-shell__head .sn-calc-export {
	display: none !important;
}

/*
 * Audio / PDF choose stage — center the main upload control in the tool viewport
 * (title lives in the white stage head; in-tool choose titles stay hidden).
 */
.sn-page-card--tool-stage-headed:not(:has( [data-pdf-file-ready] )):has( [data-pdf-editor] ),
.sn-page-card--tool-stage-headed:not(:has( [data-audio-file-ready] )):has( [data-audio-editor] ) {
	min-height: calc( 100dvh - var( --sn-header-height, 4.5rem ) - 2rem );
	display: flex;
	flex-direction: column;
}

.sn-page-card--tool-stage-headed:has( [data-pdf-editor] ) .sn-pdf-wrap,
.sn-page-card--tool-stage-headed:has( [data-audio-editor] ) .sn-audio-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
}

.sn-page-card--tool-stage-headed:has( [data-pdf-editor] ) .sn-pdf,
.sn-page-card--tool-stage-headed:has( [data-audio-editor] ) .sn-audio {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

.sn-page-card--tool-stage-headed:has( [data-pdf-editor] ) .sn-pdf-main,
.sn-page-card--tool-stage-headed:has( [data-audio-editor] ) .sn-audio-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.sn-page-card--tool-stage-headed:not( :has( [data-pdf-file-ready] ) ) .sn-pdf-stage--choose,
.sn-page-card--tool-stage-headed:not( :has( [data-audio-file-ready] ) ) .sn-audio-stage--choose {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	box-sizing: border-box;
}

.sn-page-card--tool-stage-headed .sn-pdf-drop,
.sn-page-card--tool-stage-headed .sn-audio-drop {
	flex: 0 0 auto;
	width: 100%;
	max-width: 28rem;
	margin-inline: auto;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.sn-page-card--tool-stage-headed .sn-audio-record-lite {
	margin-top: 0.35rem;
}

@media (min-width: 640px) {
	.sn-page-card--tool-stage-headed:not( :has( [data-pdf-file-ready] ) ) .sn-pdf-stage--choose,
	.sn-page-card--tool-stage-headed:not( :has( [data-audio-file-ready] ) ) .sn-audio-stage--choose {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}