/* =============================================================================
   TOOLS
   The /tools/ index hero, the calculator page layout, and the calculator
   panel component shared by both calculators.
   ============================================================================= */

/* Header height once stuck, and where the calculator panel pins (the
   site-wide --sticky-top). Kept here so the panel and the anchor offsets
   stay in step. */
/* Declared on body, not :root -- see the note in page-products.css. */
body {
	--tool-header-h: calc(var(--header-h) + var(--admin-bar-h));
	--tool-sticky:   calc(var(--sticky-top) + var(--admin-bar-h));
}

/* =============================================================================
   TOOLS INDEX HERO
   ============================================================================= */

.tools-hero {
	padding-top: var(--section-y-sm);
	padding-bottom: var(--section-y-sm);
	background-color: var(--color-bg-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.tools-hero h1 {
	margin-bottom: 10px;
}

/* Capped on the copy itself rather than on .layout-section__inner, so the
   hero text still starts on the same gridline as the cards below it. */
p.tools-hero__copy {
	max-width:     800px;
	margin-bottom: 0;
	padding:       var(--space-2xs) 0 var(--space-2xs) var(--space-m);
	border-left:   2px solid var(--color-border-subtle);
	line-height:   var(--leading-relaxed);
	color:         var(--color-text-secondary);
}

/* ---- Tool cards ---- */

/* Pins the link to the card's bottom edge so it lands on one line across the
   row regardless of how long each description runs. */
.page-archive__content--tools .page-archive__card {
	display:        flex;
	flex-direction: column;
}

.page-archive__content--tools .page-archive__card-link {
	margin-top: auto;
	padding-top: var(--space-m);
	align-self: flex-start;
}

/* =============================================================================
   CALCULATOR PAGE LAYOUT -- article + sticky tool column
   ============================================================================= */

.tool-page {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y);
}

.tool-page__inner {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap:                   var(--space-2xl);
	align-items:           start;
}

.tool-page__title {
	margin-bottom: 10px;
}

p.tool-page__intro {
	margin-bottom: var(--space-2xl);
	padding:       var(--space-2xs) 0 var(--space-2xs) var(--space-m);
	border-left:   2px solid var(--color-border-subtle);
	font-size: var(--text-h5);
	line-height:   var(--leading-relaxed);
	color:         var(--color-text-secondary);
}

/* ---- Contents ---- */

.tool-page__toc {
	padding:       var(--space-l) 0;
	margin-bottom: var(--space-2xl);
	border-top:    2px solid var(--color-border-subtle);
	border-bottom: 2px solid var(--color-border-subtle);
}

.tool-page__toc-heading {
	font-size:     var(--text-h4);
	margin-bottom: 10px;
}

.tool-page__toc-list {
	list-style:   decimal;
	padding-left: var(--space-l);
	font-size: var(--text-h5);
}

.tool-page__toc-list li {
	margin-bottom: var(--space-2xs);
}

.tool-page__toc-list a {
	color: var(--color-text-primary);
}

.tool-page__toc-list a:hover {
	color: var(--color-accent);
}

/* =============================================================================
   ARTICLE BODY
   ============================================================================= */

.tool-page__body h2,
.tool-page__faq h2 {
	margin-top:        var(--space-2xl);
	margin-bottom:     var(--space-m);
	scroll-margin-top: calc(var(--tool-header-h) + 25px);
}

.tool-page__body > h2:first-child {
	margin-top: 0;
}

.tool-page__body h3 {
	font-size:     var(--text-h4);
	margin-top:    var(--space-xl);
	margin-bottom: 10px;
}

.tool-page__body p,
.tool-page__body ul {
	font-size: var(--text-h5);
	line-height: var(--leading-relaxed);
}

.tool-page__body p {
	margin-bottom: var(--space-m);
}

.tool-page__body p a {
	font-weight: var(--weight-bold);
	color:       var(--color-accent);
}

.tool-page__body p a:hover {
	text-decoration: underline;
}

.tool-page__body ul {
	padding-left:  var(--space-xl);
	margin-bottom: var(--space-m);
}

.tool-page__body ul li {
	position:      relative;
	margin-bottom: 6px;
}

/* Matches the caret bullet used in the blog post body. */
.tool-page__body ul li::before {
	content:     "\25B6";
	position:    absolute;
	top:         8px;
	left:        -20px;
	font-size: var(--text-body-small);
	line-height: 1;
	color:       var(--color-accent);
}

/* Worked example, set apart from the surrounding prose. */
p.tool-page__formula {
	padding:          var(--space-m) 20px;
	margin-bottom:    var(--space-m);
	font-weight:      var(--weight-bold);
	background-color: var(--color-bg-subtle);
	border-left:      3px solid var(--color-accent);
	border-radius:    0 var(--radius-m) var(--radius-m) 0;
	font-variant-numeric: tabular-nums;
}

/* ---- Tables ---- */

.tool-page__table-wrap {
	max-width:  100%;
	overflow-x: auto;
	margin:     var(--space-l) 0;
}

.tool-page__table {
	width:           100%;
	border-collapse: collapse;
	font-size: var(--text-body);
}

.tool-page__table th,
.tool-page__table td {
	padding:    10px var(--space-s);
	text-align: left;
	border:     1px solid var(--color-border-subtle);
}

.tool-page__table th {
	font-weight:      var(--weight-bold);
	background-color: var(--color-accent);
	color:            var(--color-bg-primary);
	border-color:     var(--color-accent);
}

.tool-page__table tbody tr:nth-child(even) {
	background-color: var(--color-bg-subtle);
}

/* ---- FAQ ---- */

.tool-page__faq h2 {
	margin-bottom: var(--space-l);
}

.tool-page__faq .faq-question h3 {
	margin: 0;
}

/* =============================================================================
   CALCULATOR PANEL -- shared by both calculators
   ============================================================================= */

.tool-page__aside {
	position: sticky;
	top:      var(--tool-sticky);
}

.calc {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	/* A tall panel scrolls inside itself rather than running off the bottom
	   of a sticky box the reader can never reach the end of. */
	max-height:     calc(100vh - var(--tool-sticky) - 25px);
	overflow-y:     auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.calc__panel,
.calc__results {
	padding:          var(--space-l);
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
}

.calc__results {
	background-color: var(--color-bg-subtle);
}

/* ---- Unit toggle ---- */

.calc__units {
	display:          flex;
	padding:          var(--space-2xs);
	margin-bottom:    20px;
	background-color: var(--color-bg-subtle);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
}

.calc__unit {
	flex:             1;
	padding:          var(--space-xs) 10px;
	font-size:        var(--text-body-small);
	font-weight:      var(--weight-bold);
	color:            var(--color-text-secondary);
	background:       none;
	border:           0;
	border-radius:    var(--radius-xs);
	cursor:           pointer;
	transition:       background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.calc__unit.is-active {
	color:            var(--color-bg-primary);
	background-color: var(--color-accent);
}

/* ---- Fields ---- */

.calc__form,
.calc__room-fields {
	display:        flex;
	flex-direction: column;
	gap:            var(--field-gap);
}

/* Calculator labels float inside their controls like every other field
   (FLOATING LABELS in global.css). The difference is the icon: the
   primitive centres its label with a 56px line box, which a flex row
   ignores, so the height does the centring here instead. The icon
   shrinks with the label, which is intended. */
.field-group__label.calc__label {
	display:     flex;
	align-items: center;
	gap:         var(--space-xs);
	height:      var(--field-h);
	line-height: var(--leading-slim);
	margin:      0;
}

.calc__label svg {
	flex-shrink: 0;
	color:       var(--color-accent);
}

.calc__unit-label {
	font-weight: var(--weight-regular);
	color:       var(--color-text-secondary);
}

/* Calculator inputs are .field; the bold value is the one deviation -- these
   hold numbers the visitor is reading back, not prose. */
.calc__input {
	font-weight: var(--weight-bold);
}

/* Hover, focus, the invalid flag and the select cursor all come from .field
   in global.css. */

.calc__error {
	margin-bottom: 0;
	font-size:     var(--text-body-small);
	font-weight:   var(--weight-bold);
	line-height:   var(--leading-slim);
	color:         var(--color-accent);
}

.calc__submit,
.calc__add,
.calc__copy {
	width:     100%;
	min-width: 0;
	gap:       var(--space-xs);
}

.calc__actions {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     20px;
}

/* ---- Rooms (cleanroom calculator) ---- */

.calc__rooms {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.calc__room {
	padding-bottom: 20px;
	border-bottom:  1px solid var(--color-border-subtle);
}

.calc__room:last-child {
	padding-bottom: 0;
	border-bottom:  0;
}

.calc__room-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	margin-bottom:   var(--space-m);
}

.calc__room-title {
	font-size: var(--text-xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--color-accent);
}

.calc__room-remove {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--space-2xs);
	color:           var(--color-text-secondary);
	background:      none;
	border:          0;
	border-radius:   var(--radius-xs);
	cursor:          pointer;
	transition:      color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.calc__room-remove:hover {
	color:            var(--color-accent);
	background-color: var(--color-bg-subtle);
}

/* The last remaining room cannot be removed -- hide rather than disable so
   there is no dead control to puzzle over. */
.calc__rooms .calc__room:only-child .calc__room-remove {
	display: none;
}

/* ---- Results ---- */

.calc__results-title {
	font-size: var(--text-body-small);
	font-weight:    var(--weight-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom:  var(--space-m);
}

.calc__result {
	display:          flex;
	align-items:      center;
	gap:              var(--space-m);
	padding:          var(--space-m);
	margin-bottom:    10px;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-s);
}

.calc__result--primary {
	border-color: var(--color-accent);
	box-shadow:   inset 3px 0 0 var(--color-accent);
}

.calc__result-icon {
	display:     flex;
	flex-shrink: 0;
	color:       var(--color-accent);
}

.calc__result-body {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

.calc__result-label {
	font-size: var(--text-xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.calc__result-value {
	font-size: var(--text-h3);
	font-weight: var(--weight-black);
	line-height: 1.1;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.calc__result-unit {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color:       var(--color-text-secondary);
}

/* ---- Per-room breakdown ---- */

.calc__breakdown:not(:empty) {
	margin-top: 20px;
}

.calc__breakdown-room {
	padding:       var(--space-m) 0;
	border-top:    1px solid var(--color-border-subtle);
}

.calc__breakdown-title {
	font-size: var(--text-xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--color-accent);
	margin-bottom:  var(--space-xs);
}

.calc__breakdown-row {
	display:         flex;
	justify-content: space-between;
	gap:             var(--space-m);
	padding:         var(--space-3xs) 0;
	font-size:       var(--text-body-small);
}

.calc__breakdown-row dt {
	color: var(--color-text-secondary);
}

.calc__breakdown-row dd {
	font-weight: var(--weight-bold);
	text-align:  right;
	font-variant-numeric: tabular-nums;
}

.calc__copy {
	margin-top: 20px;
}

p.calc__disclaimer {
	margin-top:    var(--space-m);
	margin-bottom: 0;
	font-size:     var(--text-body-small);
	line-height:   var(--leading-slim);
	color:         var(--color-text-secondary);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1200px ) {

	.tool-page__inner {
		gap: var(--space-xl);
	}

	.tool-page__inner {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

}

/* Below this the two columns no longer both fit, so the calculator moves
   above the article -- it is the reason most people open the page. */
@media ( max-width: 1024px ) {

	.tool-page__inner {
		grid-template-columns: 1fr;
		gap:                   var(--space-xl);
	}

	.tool-page__aside {
		position: static;
		order:    -1;
		max-width: 500px;
	}

	.calc {
		max-height: none;
		overflow-y: visible;
	}

}

@media ( max-width: 768px ) {

	.tools-hero {
		padding-top: var(--section-y-md);
		padding-bottom: var(--section-y-md);
	}

	.tool-page {
		padding-bottom: var(--section-y-md);
	}

	.tool-page__body p,
	.tool-page__body ul {
		font-size: var(--text-h5);
	}

}

@media ( prefers-reduced-motion: reduce ) {

	.calc__unit,
	.calc__input,
	.calc__room-remove {
		transition: none;
	}

}