/*!
 * Preco Quote Engine — the Cabro Cost Calculator
 * ===========================================================================
 *
 * Depends on preco-tokens.css, preco-base.css and preco-widgets.css. Read the
 * token file's header first: it carries the specificity convention, the naming
 * convention and the breakpoint table.
 *
 * A SEPARATE STYLESHEET, not more of preco-widgets.css. The calculator appears
 * on one page of the site and brings a line grid, a totals panel and a modal
 * with it. Folding that into the shared bundle would make every product page
 * carry a modal it will never open.
 *
 * It builds on the widget layer rather than restating it: the fields, selects,
 * buttons, notices and spinners are the same components the ordering widgets
 * use.
 *
 * SPECIFICITY. Component rules read `.preco.preco .preco-thing` — (0,3,0),
 * one class more than the base reset. A rule on the widget root, which carries
 * `.preco` and `.preco-calc`, reads `.preco.preco-calc` and wins over the base
 * root rule on source order. There is no `!important` in this file.
 *
 * THE MODAL'S STACKING IS A TOKEN, NOT A LITERAL. `--preco-z-modal` and
 * `--preco-z-backdrop` are declared in preco-tokens.css. A theme that needs
 * the modal above something unusual raises one token rather than discovering
 * a magic number in here.
 *
 * RESPONSIVE. Verified at 320, 360, 375, 390, 414, 480, 768, 1024, 1280, 1440
 * and 1920px. Below 768px each line is a stacked card with full-width
 * controls, the totals panel follows the lines, and the modal is a full-height
 * sheet whose submit control is always reachable.
 *
 * @package Preco\QuoteEngine
 */

/* =========================================================================
 * 1. The calculator shell
 * ========================================================================= */

.preco.preco-calc {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
	width: 100%;
	max-width: var(--preco-container-max);
	min-width: 0;
}

.preco.preco .preco-calc__intro {
	margin-top: calc(var(--preco-space-6) * -1);
	max-width: 60ch;
	color: var(--preco-ink-muted);
}

/* =========================================================================
 * 2. The lines
 *
 * A stacked card below 768px and a row above it. Grid rather than a table:
 * the same markup has to be a card and a row, and a table can only be made
 * to do that with a stacking hack.
 * ========================================================================= */

.preco.preco .preco-calc__lines-block {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	min-width: 0;
}

.preco.preco .preco-calc__lines {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.preco.preco .preco-calc__line {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	padding: var(--preco-space-6);
	background-color: var(--preco-surface);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
	min-width: 0;
}

.preco.preco .preco-calc__line-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--preco-space-5);
}

.preco.preco .preco-calc__line-label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-label);
	font-weight: var(--preco-fw-semibold);
	letter-spacing: var(--preco-ls-label);
	text-transform: uppercase;
}

.preco.preco .preco-calc__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--preco-tap-min);
	min-width: var(--preco-tap-min);
	min-height: var(--preco-tap-min);
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-h3);
	line-height: 1;
	border-radius: var(--preco-radius-sm);
	cursor: pointer;
	transition: color var(--preco-transition-fast), background-color var(--preco-transition-fast);
}

.preco.preco .preco-calc__remove:hover {
	color: var(--preco-danger);
	background-color: var(--preco-danger-soft);
}

/*
 * A single line has nothing to remove down to, so the control is hidden
 * rather than disabled: a permanently inert control is the thing this
 * project does not ship.
 */
.preco.preco .preco-calc__lines[data-preco-single="1"] .preco-calc__remove {
	display: none;
}

.preco.preco .preco-calc__line-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--preco-space-5);
	align-items: end;
	min-width: 0;
}

.preco.preco .preco-calc__cell {
	min-width: 0;
}

.preco.preco .preco-calc__unit {
	color: var(--preco-ink-subtle);
	font-weight: var(--preco-fw-regular);
}

/* The per-line total, which is a figure rather than a field. */
.preco.preco .preco-calc__cell--total {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--preco-space-5);
	padding-top: var(--preco-space-5);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-calc__total-label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-calc__total-value {
	font-size: var(--preco-fs-body-lg);
	font-weight: var(--preco-fw-semibold);
	text-align: right;
	white-space: nowrap;
}

.preco.preco .preco-calc__line-busy {
	position: absolute;
	top: var(--preco-space-5);
	right: 0;
	display: none;
}

.preco.preco .preco-calc__line.preco-is-busy .preco-calc__line-busy {
	display: block;
}

.preco.preco .preco-calc__line.preco-is-busy .preco-calc__total-value {
	opacity: 0.45;
}

@media (min-width: 768px) {

	.preco.preco .preco-calc__line-grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
		gap: var(--preco-space-6);
	}

	.preco.preco .preco-calc__cell--laying {
		grid-column: 1 / -2;
	}

	.preco.preco .preco-calc__cell--total {
		grid-column: -2 / -1;
		justify-content: flex-end;
		padding-top: 0;
		border-top: 0;
	}

	.preco.preco .preco-calc__total-label {
		display: none;
	}

	.preco.preco .preco-calc__line-busy {
		top: 50%;
		right: calc(100% + var(--preco-space-4));
		transform: translateY(-50%);
	}
}

.preco.preco .preco-calc__lines-actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
	align-items: flex-start;
}

.preco.preco .preco-calc__lines-note:empty {
	display: none;
}

.preco.preco .preco-calc__lines-note {
	color: var(--preco-ink-subtle);
}

/* =========================================================================
 * 3. The scope notice
 *
 * Specification 8.1: a high-contrast warning panel, non-dismissible, with
 * full-opacity text on its ground. Nothing in here is dimmed, and there is no
 * close control to style because there is none in the markup.
 * ========================================================================= */

.preco.preco .preco-scope {
	padding: var(--preco-space-7);
	color: var(--preco-ink-inverse);
	background-color: var(--preco-danger-strong);
	border-radius: var(--preco-radius-md);
}

.preco.preco .preco-scope__title {
	margin-bottom: var(--preco-space-4);
	color: var(--preco-ink-inverse);
	font-size: var(--preco-fs-h4);
	font-weight: var(--preco-fw-bold);
}

.preco.preco .preco-scope__list {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.preco.preco .preco-scope__item {
	color: var(--preco-ink-inverse);
	font-size: var(--preco-fs-small);
	line-height: var(--preco-lh-relaxed);
}

/*
 * Underlined rather than recoloured. A link inside a red panel cannot be
 * distinguished by hue without losing contrast against the ground, so it is
 * distinguished by weight and underline instead.
 */
.preco.preco .preco-scope__link {
	color: var(--preco-ink-inverse);
	font-weight: var(--preco-fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.preco.preco .preco-scope__link:hover {
	text-decoration-thickness: 2px;
}

.preco.preco .preco-scope__link:focus-visible {
	outline-color: var(--preco-focus-color-inverse);
}

/* =========================================================================
 * 4. The totals panel
 * ========================================================================= */

.preco.preco .preco-calc__totals {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
	width: 100%;
	margin-left: auto;
}

@media (min-width: 768px) {

	.preco.preco .preco-calc__totals {
		max-width: 28rem;
	}
}

.preco.preco .preco-calc__totals-heading {
	color: var(--preco-ink);
	font-size: var(--preco-fs-h4);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-calc__totals-rows {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
}

.preco.preco .preco-calc__totals-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--preco-space-7);
}

.preco.preco .preco-calc__totals-label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-calc__totals-value {
	font-weight: var(--preco-fw-medium);
	text-align: right;
	white-space: nowrap;
}

.preco.preco .preco-calc__totals-row--grand {
	padding-top: var(--preco-space-4);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-calc__totals-row--grand .preco-calc__totals-label {
	color: var(--preco-ink);
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-calc__totals-row--grand .preco-calc__totals-value {
	color: var(--preco-brand-primary);
	font-size: var(--preco-fs-h3);
	font-weight: var(--preco-fw-bold);
}

/*
 * Absolutely positioned, so the panel keeps its height while recalculating
 * and the figures beneath it do not move under the reader's thumb.
 */
.preco.preco .preco-calc__totals-pending {
	position: absolute;
	top: var(--preco-space-6);
	right: var(--preco-space-6);
	display: none;
}

.preco.preco .preco-calc__totals.preco-is-busy .preco-calc__totals-pending {
	display: block;
}

.preco.preco .preco-calc__totals.preco-is-busy .preco-calc__totals-value {
	opacity: 0.45;
	transition: opacity var(--preco-transition-fast);
}

.preco.preco .preco-calc__hint {
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-calc__hint:empty {
	display: none;
}

.preco.preco .preco-calc__actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	margin-top: var(--preco-space-4);
}

.preco.preco .preco-calc__success {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	align-items: flex-start;
}

/* =========================================================================
 * 7. Reduced motion
 * ========================================================================= */

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

	.preco.preco .preco-calc__remove,
	.preco.preco .preco-modal__close,
	.preco.preco .preco-calc__totals-value {
		transition: none;
	}
}