/**
 * Tool calculator — scoped styles for the [thisismyurl_tool_calculator]
 * renderer (template-parts/tool-calculator.php). Loaded only on singular
 * tool posts via inc/tool-calculators.php.
 *
 * Converges on the theme's real token layer (theme.json: brand-navy,
 * brand-copper, neutral-0..900; Fraunces display / Georgia body / JetBrains
 * mono / system UI; border radius 0; the 4px spacing scale). Literal fallbacks
 * mirror the current theme.json values so the layout holds if a token is
 * renamed. Mobile-first; readable from 320px up.
 */

.thisismyurl-tool-calc {
	/* Warm neutral surfaces (were cool #fff / #d3dce6 off-palette fallbacks). */
	--tic-bg: var( --wp--preset--color--neutral-0, #FAFAF8 );
	--tic-surface: var( --wp--preset--color--neutral-50, #F2F1EE );
	--tic-border: var( --wp--preset--color--neutral-200, #C8C5BC );
	--tic-border-soft: var( --wp--preset--color--neutral-100, #E4E2DC );

	--tic-text: var( --wp--preset--color--neutral-900, #1A1916 );
	--tic-text-medium: var( --wp--preset--color--neutral-800, #2A2925 );
	--tic-muted: var( --wp--preset--color--neutral-600, #4A4843 );

	/* Navy is the interactive/answer colour; copper is the <5% accent. */
	--tic-accent: var( --wp--preset--color--brand-navy, #123456 );
	--tic-copper: var( --wp--preset--color--brand-copper, #B87333 );
	--tic-copper-dim: var( --wp--preset--color--brand-copper-dim, #8C5A28 );

	/* Warm error pair, copper-adjacent rather than Flat-UI blue-red. */
	--tic-error: #8C2F1D;
	--tic-error-bg: #F7ECE7;
	--tic-error-text: #6E2415;

	/* Type roles, pulled from the theme families. */
	--tic-font-display: var( --f-display, var( --wp--preset--font-family--display, Fraunces, Georgia, serif ) );
	--tic-font-body: var( --f-body, var( --wp--preset--font-family--body, Georgia, serif ) );
	--tic-font-ui: var( --f-ui, var( --wp--preset--font-family--ui, system-ui, sans-serif ) );
	--tic-font-mono: var( --f-mono, var( --wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace ) );

	max-width: 48rem;
	margin-inline: auto;
	color: var( --tic-text );
}

.thisismyurl-tool-calc__description {
	margin: 0 0 var(--sp-xl);
	color: var( --tic-text-medium );
	font-size: var( --wp--preset--font-size--md, 1.25rem );
	line-height: 1.6;
}

/* Form layout ---------------------------------------------------------- */

/* The flat 1.5rem gap gave the same spacing to two different relationships:
   fieldset-to-fieldset (peer input groups, correctly equal) and fieldset-to-
   actions (the conclusion of the form, a different relationship). A design-craft
   audit measured gaps of [24, 24] on 2026-08-05. Peers keep the grid gap; the
   action row gets its own, larger separation so the form reads as groups then
   a decision, rather than three interchangeable blocks. */
.thisismyurl-tool-calc__form {
	display: grid;
	gap: var(--sp-xl);
}

.thisismyurl-tool-calc__group {
	margin: 0;
	padding: var(--sp-xl);
	border: 1px solid var( --tic-border-soft );
	border-radius: 0;
	background: var( --tic-bg );
}

/* Legend reads as a tracked categorical eyebrow, matching the site's
   section labels (uppercase UI/mono), not a bold serif sub-head. */
.thisismyurl-tool-calc__legend {
	padding-inline: var(--sp-xs);
	margin-inline-start: calc(var(--sp-xs) * -1);
	font-family: var( --tic-font-ui );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --tic-copper-dim );
}

.thisismyurl-tool-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-xs);
}

.thisismyurl-tool-calc__field + .thisismyurl-tool-calc__field {
	margin-top: var(--sp-md);
}

/* JS sets [hidden] on conditional wrappers; this class mirrors that state
   for any future server-rendered hidden default. */
.thisismyurl-tool-calc__field--hidden,
.thisismyurl-tool-calc__field[hidden] {
	display: none;
}

.thisismyurl-tool-calc__label {
	font-family: var( --tic-font-body );
	font-weight: 600;
	font-size: var(--fs-base);
	color: var( --tic-text );
}

.thisismyurl-tool-calc__required {
	color: var( --tic-copper );
}

.thisismyurl-tool-calc__input {
	width: 100%;
	padding: var(--sp-sm);
	font-family: var( --tic-font-ui );
	font-size: var(--fs-base); /* >=16px keeps iOS from auto-zooming the field. */
	line-height: 1.4;
	color: var( --tic-text );
	background: var( --tic-bg );
	border: 1px solid var( --tic-border );
	border-radius: 0;
	box-sizing: border-box;
}

/* Trim native number spinners — a low-effort default tell. */
.thisismyurl-tool-calc__number {
	appearance: textfield;
	-moz-appearance: textfield;
}

.thisismyurl-tool-calc__number::-webkit-outer-spin-button,
.thisismyurl-tool-calc__number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.thisismyurl-tool-calc__input:focus {
	outline: 2px solid var( --tic-accent );
	outline-offset: 1px;
	border-color: var( --tic-accent );
}

/* aria-invalid inputs get a visible, non-colour-only marker. */
.thisismyurl-tool-calc__input[aria-invalid="true"] {
	border-color: var( --tic-error );
	box-shadow: inset 3px 0 0 0 var( --tic-error );
}

.thisismyurl-tool-calc__help {
	margin: 0;
	font-family: var( --tic-font-ui );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	line-height: 1.5;
	color: var( --tic-muted );
}

.thisismyurl-tool-calc__field-error {
	margin: 0;
	font-family: var( --tic-font-ui );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	font-weight: 600;
	line-height: 1.5;
	color: var( --tic-error-text );
}

.thisismyurl-tool-calc__field-error[hidden] {
	display: none;
}

/* Visually hidden but present for assistive tech (the terse status region). */
.thisismyurl-tool-calc__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Actions -------------------------------------------------------------- */

.thisismyurl-tool-calc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	/* Separated from the fieldsets above by more than the grid's own 1.5rem:
	   fieldset-to-fieldset is a peer relationship, fieldset-to-actions is the
	   form's conclusion. A design-craft audit measured both at 24px on
	   2026-08-05, so the form read as three interchangeable blocks. */
	margin-block-start: var(--sp-md);
}

.thisismyurl-tool-calc__submit,
.thisismyurl-tool-calc__reset {
	min-height: 44px; /* 44px touch target. */
	padding: var(--sp-sm) var(--sp-xl);
	font-family: var( --tic-font-ui );
	font-size: var(--fs-base);
	font-weight: 600;
	border-radius: 0;
	cursor: pointer;
}

.thisismyurl-tool-calc__submit {
	color: var( --wp--preset--color--text-inverse, #E8E6E0 );
	background: var( --tic-accent );
	border: 1px solid var( --tic-accent );
}

.thisismyurl-tool-calc__submit:hover,
.thisismyurl-tool-calc__submit:focus {
	background: var( --tic-copper-dim );
	border-color: var( --tic-copper-dim );
}

.thisismyurl-tool-calc__reset {
	color: var( --tic-accent );
	background: transparent;
	border: 1px solid var( --tic-border );
}

.thisismyurl-tool-calc__reset:hover,
.thisismyurl-tool-calc__reset:focus {
	border-color: var( --tic-accent );
}

.thisismyurl-tool-calc__submit:focus-visible,
.thisismyurl-tool-calc__reset:focus-visible {
	outline: 2px solid var( --tic-accent );
	outline-offset: 2px;
}

/* Errors --------------------------------------------------------------- */

.thisismyurl-tool-calc__errors {
	padding: var(--sp-md);
	border: 1px solid var( --tic-error );
	border-inline-start-width: 3px;
	border-radius: 0;
	background: var( --tic-error-bg );
	color: var( --tic-error-text );
	font-family: var( --tic-font-ui );
	font-size: var(--fs-ui);
}

.thisismyurl-tool-calc__errors[hidden] {
	display: none;
}

.thisismyurl-tool-calc__errors div {
	margin-top: var(--sp-2xs);
}

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

/* The answer zone: heaviest surface on the page, marked with the copper
   accent bar (the site's border-inline-start signature) so it never reads
   as just another grey box in the FAQ stack. */
.thisismyurl-tool-calc__results:not(:empty) {
	margin-top: var(--sp-xl);
	padding: var(--sp-xl);
	border: 1px solid var( --tic-border );
	border-inline-start: 3px solid var( --tic-copper );
	border-radius: 0;
	background: var( --tic-surface );
}

.thisismyurl-tool-calc__results-heading {
	margin: 0 0 var(--sp-sm);
	font-family: var( --tic-font-ui );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --tic-copper-dim );
}

.thisismyurl-tool-calc__results-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-md);
	padding: var(--sp-xs) 0;
	border-bottom: 1px solid var( --tic-border-soft );
}

.thisismyurl-tool-calc__results-row:last-child {
	border-bottom: 0;
}

/* The number the visitor came for — Fraunces display, its own weight class,
   the same "this is the figure that matters" treatment the brand uses
   elsewhere. */
.thisismyurl-tool-calc__results-row--emphasize {
	align-items: baseline;
	margin: var(--sp-2xs) 0;
	padding: var(--sp-sm) 0;
	font-family: var( --tic-font-display );
	font-size: var( --wp--preset--font-size--lg, 1.5625rem );
	font-weight: 600;
	line-height: 1.2;
	color: var( --tic-accent );
}

.thisismyurl-tool-calc__results-note {
	margin: var(--sp-sm) 0 0;
	font-family: var( --tic-font-ui );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	line-height: 1.5;
	color: var( --tic-muted );
}

/* Action bar injected next to the results panel. */
.thisismyurl-tool-calc__results-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-xs);
	margin-top: var(--sp-md);
}

.thisismyurl-tool-calc__results-actions[hidden] {
	display: none;
}

.thisismyurl-tool-calc__results-actions button {
	min-height: 44px; /* parity with the primary submit/reset targets. */
	padding: var(--sp-xs) var(--sp-md);
	font-family: var( --tic-font-ui );
	font-size: var(--fs-ui);
	color: var( --tic-accent );
	background: var( --tic-bg );
	border: 1px solid var( --tic-border );
	border-radius: 0;
	cursor: pointer;
}

.thisismyurl-tool-calc__results-actions button:hover,
.thisismyurl-tool-calc__results-actions button:focus {
	border-color: var( --tic-accent );
}

.thisismyurl-tool-calc__results-actions button:focus-visible {
	outline: 2px solid var( --tic-accent );
	outline-offset: 2px;
}

.thisismyurl-tool-calc__results-status {
	font-family: var( --tic-font-ui );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	color: var( --tic-muted );
}

/* Formula and FAQ ------------------------------------------------------ */

/* Recede below the answer: no fill, lighter rule, a quiet disclosure. */
.thisismyurl-tool-calc__formula,
.thisismyurl-tool-calc__faq-item {
	margin-top: var(--sp-md);
	padding: var(--sp-sm) var(--sp-md);
	border: 1px solid var( --tic-border-soft );
	border-radius: 0;
	background: transparent;
}

.thisismyurl-tool-calc__formula summary,
.thisismyurl-tool-calc__faq-question {
	display: flex;
	align-items: baseline;
	gap: var(--sp-xs);
	font-family: var( --tic-font-ui );
	font-weight: 600;
	color: var( --tic-accent );
	cursor: pointer;
	list-style: none;
}

.thisismyurl-tool-calc__formula summary::-webkit-details-marker,
.thisismyurl-tool-calc__faq-question::-webkit-details-marker {
	display: none;
}

/* Custom copper disclosure marker, rotates open. */
.thisismyurl-tool-calc__formula summary::before,
.thisismyurl-tool-calc__faq-question::before {
	content: "+";
	display: inline-block;
	width: 1em;
	font-family: var( --tic-font-mono, monospace );
	font-weight: 700;
	color: var( --tic-copper );
	transition: transform 0.15s ease;
}

.thisismyurl-tool-calc__formula[open] summary::before,
.thisismyurl-tool-calc__faq-item[open] .thisismyurl-tool-calc__faq-question::before {
	content: "\2013"; /* en dash — the "expanded" glyph. */
}

.thisismyurl-tool-calc__formula summary:focus-visible,
.thisismyurl-tool-calc__faq-question:focus-visible {
	outline: 2px solid var( --tic-accent );
	outline-offset: 2px;
}

.thisismyurl-tool-calc__formula-intro,
.thisismyurl-tool-calc__formula-note,
.thisismyurl-tool-calc__faq-answer {
	margin: var(--sp-sm) 0 0;
	line-height: 1.6;
	text-wrap: pretty;
	color: var( --tic-text-medium );
}

.thisismyurl-tool-calc__formula-line {
	margin: var(--sp-sm) 0 0;
	padding: var(--sp-sm);
	overflow-x: auto;
	background: var( --tic-surface );
	border: 1px solid var( --tic-border-soft );
	border-inline-start: 3px solid var( --tic-border );
	border-radius: 0;
}

.thisismyurl-tool-calc__formula-line code {
	font-family: var( --tic-font-mono, ui-monospace, monospace );
	font-size: var( --wp--preset--font-size--sm, 0.8rem );
	color: var( --tic-text );
	white-space: pre-wrap;
	word-break: break-word;
}

.thisismyurl-tool-calc__faq {
	margin-top: 2rem;
}

.thisismyurl-tool-calc__faq-heading {
	font-family: var( --tic-font-display );
	font-size: var( --wp--preset--font-size--xl, 1.953rem );
	color: var( --tic-text );
}

/* Two-column field grid once there is room. */
@media (min-width: 600px) {
	.thisismyurl-tool-calc__group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-md) var(--sp-xl);
	}

	.thisismyurl-tool-calc__legend {
		grid-column: 1 / -1;
	}

	.thisismyurl-tool-calc__field + .thisismyurl-tool-calc__field {
		margin-top: 0;
	}
}

/* Windows High Contrast Mode — keep the answer, the error border, and the
   copper accent bars perceivable when OS colours override the palette. */
@media (forced-colors: active) {
	.thisismyurl-tool-calc__results:not(:empty),
	.thisismyurl-tool-calc__formula-line {
		border-inline-start-color: Highlight;
	}

	.thisismyurl-tool-calc__results-row--emphasize {
		forced-color-adjust: none;
		color: Highlight;
	}

	.thisismyurl-tool-calc__input[aria-invalid="true"] {
		box-shadow: none;
		outline: 2px solid Mark;
	}

	.thisismyurl-tool-calc__formula summary::before,
	.thisismyurl-tool-calc__faq-question::before {
		color: CanvasText;
	}
}

/* Respect reduced-motion for the disclosure marker rotation. */
@media (prefers-reduced-motion: reduce) {
	.thisismyurl-tool-calc__formula summary::before,
	.thisismyurl-tool-calc__faq-question::before {
		transition: none;
	}
}

/* Print ----------------------------------------------------------------- */

/* What a printed calculator is FOR: carrying one estimate to a supplier
   counter or a job site. That is the page title, the inputs that produced the
   number, and the number. Everything else on the page — site chrome, the
   below-fold prose, the CTA, the formula and FAQ disclosures, the comment
   form — is screen furniture that would push a one-page estimate to four or
   five sheets.

   This stylesheet is enqueued ONLY on singular tool posts (see the enqueue in
   inc/tool-calculators.php), so the un-namespaced chrome selectors below can
   never leak onto another template. */
@media print {
	@page {
		margin: 14mm;
	}

	html,
	body {
		background: #fff !important;
		font-size: 10pt;
	}

	/* Site chrome and post furniture. */
	.skip-link,
	.site-utility,
	.site-header,
	.site-footer,
	.site-footer-wordmark,
	.breadcrumb,
	.single-eyebrow,
	.single-meta,
	.single-standing,
	.single-toc-wrap,
	.single-hero-img,
	.single-foot,
	.wp-block-comments,
	.comments-area,
	.timu-consent,
	.tool-cta {
		display: none !important;
	}

	/* Everything in the post body that is not the tool itself: the lead
	   paragraph, the below-fold prose, the CTA group. .estimator-result is
	   named explicitly because on the scope-estimator page it is a SIBLING of
	   the wizard, not a descendant. :has() carries the whole selector, so a
	   browser without it simply prints the prose rather than mis-hiding the
	   answer. */
	.single-content > *:not(.thisismyurl-tool-calc):not(.estimator-result):not(:has( .thisismyurl-tool-calc )) {
		display: none !important;
	}

	main.single,
	.single-content,
	.single-header {
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
	}

	/* Keep the title — it names what the number is an estimate OF. */
	.wp-block-post-title {
		margin: 0 0 var(--sp-xs) !important;
		font-size: 16pt !important;
		line-height: 1.2 !important;
	}

	.thisismyurl-tool-calc {
		max-width: none;
		margin: 0;
		color: var(--tic-text);
	}

	/* The calculator's own secondary matter. */
	.thisismyurl-tool-calc__description,
	.thisismyurl-tool-calc__help,
	.thisismyurl-tool-calc__field-error,
	.thisismyurl-tool-calc__errors,
	.thisismyurl-tool-calc__actions,
	.thisismyurl-tool-calc__results-actions,
	.thisismyurl-tool-calc__results-status,
	.thisismyurl-tool-calc__formula,
	.thisismyurl-tool-calc__faq {
		display: none !important;
	}

	/* Inputs, compacted: a dense record of what was entered, not a form to
	   fill in on paper. Three across on letter/A4 at 10pt. */
	.thisismyurl-tool-calc__form {
		display: block !important; /* drop the screen grid and its 1.5rem gap. */
		margin: 0;
	}

	.thisismyurl-tool-calc__group {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-2xs) var(--sp-md) !important;
		margin: 0 0 var(--sp-xs) !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		break-inside: avoid;
	}

	.thisismyurl-tool-calc__legend {
		grid-column: 1 / -1;
		margin: var(--sp-2xs) 0 var(--sp-3xs) !important;
		padding: 0 !important;
		font-size: 8pt !important;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--tic-text);
	}

	/* Label and value share a line on paper — the screen stacks them, which
	   doubles the row count for no gain once the field is read-only. */
	.thisismyurl-tool-calc__field {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--sp-2xs);
		margin: 0 !important;
		break-inside: avoid;
	}

	.thisismyurl-tool-calc__label {
		margin: 0 !important;
		font-size: 9pt !important;
		font-weight: 400;
		color: var(--tic-text);
	}

	/* The negative start margin eats the whitespace text node the template
	   leaves between the label text and the (hidden) required asterisk, so the
	   colon sits tight against the word rather than floating off it. */
	.thisismyurl-tool-calc__label::after {
		content: ":";
		margin-inline-start: -0.3em;
	}

	.thisismyurl-tool-calc__required {
		display: none;
	}

	.thisismyurl-tool-calc__input {
		width: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		font-size: 9pt !important;
		font-weight: 700;
		color: var(--tic-text);
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		appearance: none;
	}

	/* The answer. Kept whole on one sheet, kept legible without the fill. */
	.thisismyurl-tool-calc__results:not(:empty) {
		margin-top: var(--sp-xs) !important;
		padding: var(--sp-xs) 0 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid var(--tic-text) !important;
		break-inside: avoid;
	}

	.thisismyurl-tool-calc__results-heading {
		margin-bottom: var(--sp-2xs) !important;
		font-size: 8pt !important;
		color: var(--tic-text);
	}

	.thisismyurl-tool-calc__results-row {
		padding: var(--sp-3xs) 0 !important;
		border-bottom: 0 !important;
		color: var(--tic-text);
	}

	.thisismyurl-tool-calc__results-row--emphasize {
		margin: var(--sp-2xs) 0 !important;
		padding: var(--sp-2xs) 0 !important;
		font-size: 14pt !important;
		color: var(--tic-text);
	}

	.thisismyurl-tool-calc__results-note {
		margin-top: var(--sp-2xs) !important;
		font-size: 8pt !important;
		color: var(--tic-text);
	}

	/* The scope estimator (wordpress-project-scope-estimator) is the one tool
	   that is not registry-backed — it is a seven-step wizard block from the
	   thisismyurl-site plugin. Same doctrine: the wizard only ever shows one
	   step at a time, so printing it is meaningless; the quote panel is the
	   thing worth carrying, and it already restates the scope it priced. */
	.estimator-lede,
	.estimator-progress,
	.estimator-form-panel,
	.estimator-nav,
	.estimator-eeat,
	.estimator-nojs-notice {
		display: none !important;
	}

	.estimator-result {
		margin: 0 !important;
		padding: var(--sp-xs) 0 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid var(--tic-text) !important;
		break-inside: avoid;
		color: var(--tic-text);
	}

	/* Source stamp — a printed estimate with no origin is an orphan. The URL is
	   written to data-print-source by the print button in tool-calculators.js;
	   with no attribute (printed via the browser menu before any calculation)
	   the line collapses to the site name alone. */
	.thisismyurl-tool-calc::after,
	.estimator-result:not([hidden])::after {
		content: "thisismyurl.com " attr( data-print-source );
		display: block;
		margin-top: var(--sp-sm);
		padding-top: var(--sp-2xs);
		border-top: 1px solid var(--tic-border);
		font-family: var( --tic-font-ui );
		font-size: 7.5pt;
		color: #333;
		word-break: break-all;
	}
}