/* World Cargo Quote Forms. Colors come from each form's Text & Style tab.
 *
 * The form fills the width it is given and adapts to that width (container
 * queries), not to the screen: a form in a narrow column gets the stacked
 * layout even on a desktop. `.wcqf--compact` tightens everything. */
.wcqf {
	--wcqf-accent: #0b5cab;
	--wcqf-on-accent: #fff;
	--wcqf-bg: #fff;
	--wcqf-radius: 10px;
	--wcqf-text: #14181f;
	--wcqf-muted: #5b6472;
	--wcqf-text-2: #3f4651;  /* page headings and labels: the form title keeps the full text colour */
	--wcqf-line: #d9dee5;
	--wcqf-soft: color-mix(in srgb, var(--wcqf-accent) 8%, var(--wcqf-bg));
	--wcqf-text-2: color-mix(in srgb, var(--wcqf-text) 78%, var(--wcqf-bg));
	--wcqf-error: #b42318;
	--wcqf-pad: clamp(16px, 4cqi, 36px);
	--wcqf-gap: 16px;
	--wcqf-control: 46px;
	--wcqf-card-pad: 14px;
	--wcqf-icon: 24px;
	--wcqf-tile: 44px;        /* the icon's soft square */
	--wcqf-tile-min: 112px;   /* a choice tile never gets shorter than this */
	--wcqf-tile-max: 150px;   /* nor taller, however much room the stage has */
	--wcqf-cards-gap: 10px;
	container-type: inline-size;
	container-name: wcqf;
	width: 100%;
	max-width: none;
	margin: 0;
	color: var(--wcqf-text);
	font: inherit;
	line-height: 1.45;
}
.wcqf--compact {
	--wcqf-pad: clamp(12px, 3cqi, 22px);
	--wcqf-gap: 10px;
	--wcqf-control: 44px;
	--wcqf-card-pad: 10px;
	--wcqf-icon: 20px;
	--wcqf-tile: 36px;
	--wcqf-tile-min: 88px;
	--wcqf-tile-max: 132px;
	--wcqf-cards-gap: 8px;
	line-height: 1.35;
}
.wcqf *, .wcqf *::before, .wcqf *::after { box-sizing: border-box; }
.wcqf [hidden] { display: none !important; }

.wcqf-form, .wcqf-done {
	width: 100%;
	background: var(--wcqf-bg);
	border: 1px solid var(--wcqf-line);
	border-radius: calc(var(--wcqf-radius) + 4px);
	padding: var(--wcqf-pad);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}
.wcqf--compact .wcqf-form, .wcqf--compact .wcqf-done { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.wcqf-header { margin: 0 0 calc(var(--wcqf-gap) * 1.5); }
.wcqf-header--center { text-align: center; }
.wcqf .wcqf-title { margin: 0; color: inherit; font-size: 1.6em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.wcqf-subtitle { margin: 6px 0 0; color: var(--wcqf-muted); font-size: .95em; line-height: 1.45; text-wrap: pretty; max-width: 68ch; }
.wcqf-header--center .wcqf-subtitle { margin-inline: auto; }
.wcqf--compact .wcqf-header { margin-bottom: var(--wcqf-gap); }
.wcqf--compact .wcqf-title { font-size: 1.3em; }
@container wcqf (max-width: 420px) { .wcqf .wcqf-title { font-size: 1.35em; } }

/* Progress */
.wcqf-progress { display: flex; gap: 6px; margin: 0 0 calc(var(--wcqf-gap) * 1.5); padding: 0 0 calc(var(--wcqf-gap) * 1.1); list-style: none; border-bottom: 1px solid var(--wcqf-line); }
.wcqf-progress li { flex: 1; min-width: 0; margin: 0; padding: 0; }
.wcqf-progress li::before { content: none; }
.wcqf-progress__btn {
	all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 32px;
	padding-top: 10px; border-top: 3px solid var(--wcqf-line); color: var(--wcqf-muted); font-size: .85em; cursor: default;
}
.wcqf-progress__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcqf-progress__num {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
	background: var(--wcqf-line); color: var(--wcqf-text); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
	font-variant-numeric: tabular-nums; box-sizing: border-box;
	/* Centre the digit's ink, not its line box: trim the space above the cap height and below the baseline. */
	text-box: trim-both cap alphabetic;
}
.wcqf--compact .wcqf-progress__btn { padding-top: 6px; min-height: 24px; font-size: .8em; }
.wcqf--compact .wcqf-progress__num { width: 20px; height: 20px; font-size: 11px; }
.is-done .wcqf-progress__btn, .is-current .wcqf-progress__btn { border-color: var(--wcqf-accent); color: var(--wcqf-text); }
.is-done .wcqf-progress__btn { cursor: pointer; }
.is-done .wcqf-progress__num, .is-current .wcqf-progress__num { background: var(--wcqf-accent); color: var(--wcqf-on-accent); }
.is-current .wcqf-progress__label { font-weight: 600; }
.wcqf-progress__btn:focus-visible { outline: 2px solid var(--wcqf-accent); outline-offset: 3px; }

/* Headings */
.wcqf-h { margin: 0 0 6px; color: var(--wcqf-accent); font-size: 1.2em; line-height: 1.25; outline: none; }
/* Page titles stay blue inside a section that sets its own heading colour. */
.wcqf .wcqf-h { color: var(--wcqf-accent); }
.wcqf-intro { margin: 0 0 18px; color: var(--wcqf-muted); }
/* A page's subtitle shows on a wide form only; narrower forms keep just the title. */
@container wcqf (max-width: 759px) { .wcqf-panel > .wcqf-intro { display: none; } }
.wcqf--compact .wcqf-h { font-size: 1.05em; margin-bottom: 4px; }
.wcqf--compact .wcqf-intro { margin-bottom: 10px; font-size: .92em; }
.wcqf-panel > .wcqf-h + .wcqf-cards, .wcqf-types .wcqf-h + .wcqf-cards { margin-top: calc(var(--wcqf-gap) * .8); }

/* The stage keeps one height from the first page to the last (form.js sets
   it to the tallest page). Pages are flex columns inside it, so the choice
   tiles can grow into whatever room the page leaves. */
.wcqf-stage { position: relative; display: flex; flex-direction: column; }
/* A page shorter than the stage sits centred in it rather than leaving a hole at the bottom. */
.wcqf-panel { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
.wcqf-modes, .wcqf-types, .wcqf-grid, .wcqf-section, .wcqf-review { flex-shrink: 0; }
.wcqf-modes, .wcqf-types:not(.wcqf-reveal), .wcqf-types__in { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
.wcqf-modes, .wcqf-types, .wcqf-types__in { flex: 1 1 auto; }
.wcqf-panel.has-types .wcqf-modes { flex: 0 0 auto; }
/* Method tiles alone on the page may grow taller than usual. */
.wcqf-panel:not(.has-types) .wcqf-modes .wcqf-cards { --wcqf-tile-max: 200px; }
.wcqf-types:not(:first-child) { margin-top: calc(var(--wcqf-gap) * 1.25); }
.wcqf-types[hidden] + * { margin-top: 0; }

/* Choice tiles: icon in a soft square, label, one line of help. As many
   columns as the width allows; rows share the page's spare height up to a cap. */
.wcqf-cards {
	display: grid; gap: var(--wcqf-cards-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
	grid-auto-rows: minmax(var(--wcqf-tile-min), 1fr); flex: 1 1 auto;
	max-height: calc(var(--wcqf-rows, 1) * var(--wcqf-tile-max) + (var(--wcqf-rows, 1) - 1) * var(--wcqf-cards-gap));
	/* The cap never cuts into the tiles' own content: a tile grows as tall as its text needs. */
	min-height: -webkit-max-content; min-height: max-content;
}
.wcqf-cards--types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* Tiles grow into all the free room on their page (no cap), never below --wcqf-tile-min, and keep their
   content centred so the padding is even all the way round however tall they grow. */
.wcqf .wcqf-cards { max-height: none; }
.wcqf .wcqf-card { justify-content: center; }
.wcqf--compact .wcqf-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.wcqf--compact .wcqf-cards--types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); }
.wcqf-card {
	/* Content starts at the top, so icons and labels line up across a row whatever the help text's length. */
	all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
	gap: 10px; min-height: var(--wcqf-tile-min); padding: var(--wcqf-card-pad);
	border: 1.5px solid var(--wcqf-line); border-radius: var(--wcqf-radius); background: var(--wcqf-bg);
	color: var(--wcqf-text); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
	-webkit-tap-highlight-color: transparent;
	animation: wcqf-in .35s ease-out both; animation-delay: calc(var(--i, 0) * 40ms);
}
.wcqf--compact .wcqf-card { gap: 8px; }
.wcqf--compact .wcqf-card__desc { display: none; }
.wcqf-card:hover { border-color: color-mix(in srgb, var(--wcqf-accent) 55%, var(--wcqf-line)); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.wcqf-card:active { transform: scale(.985); }
.wcqf-card:focus-visible { outline: 2px solid var(--wcqf-accent); outline-offset: 2px; }
.wcqf-card[aria-pressed="true"] { border-color: var(--wcqf-accent); background: var(--wcqf-soft); box-shadow: inset 0 0 0 1px var(--wcqf-accent); }
.wcqf-card .wcqf-icon {
	flex: none; width: var(--wcqf-tile); height: var(--wcqf-tile); padding: calc(var(--wcqf-tile) * .22); border-radius: calc(var(--wcqf-radius) * .8);
	background: var(--wcqf-soft); color: var(--wcqf-accent); transition: background-color .15s, color .15s;
}
.wcqf-card[aria-pressed="true"] .wcqf-icon { background: var(--wcqf-accent); color: var(--wcqf-on-accent); }
.wcqf-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wcqf-card__label { font-weight: 600; line-height: 1.25; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wcqf-card__desc { color: var(--wcqf-muted); font-size: .84em; line-height: 1.35; }
/* Descriptions back where the layout would leave them out, when there is room (form.js measure: wcqf--descs). */
.wcqf.wcqf--descs .wcqf-cards .wcqf-card .wcqf-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* The longer explanation of a method, on a wide form (760px and up): it replaces the short line, and the
   icon moves beside the title so the card stays about as tall as before. Cargo tiles get theirs when the
   form does not ask the method first (560px and up), so the tiles have the page to themselves. Dropped
   (wcqf--nomore, set by form.js measure) only when the form cannot fit the screen even in its compact layout. */
.wcqf-card__more, .wcqf-card__mid { display: none; color: var(--wcqf-muted); font-size: .84em; line-height: 1.4; }
/* The medium text takes the short line's place on forms 480px and wider (wcqf--nomid, set by form.js measure,
   steps back to the short line when the form would not fit the screen). Where the long text shows, it wins. */
@container wcqf (min-width: 480px) {
	.wcqf:not(.wcqf--nomid):not(.wcqf--short) .wcqf-cards .wcqf-card:has(.wcqf-card__mid) .wcqf-card__desc { display: none; }
	.wcqf:not(.wcqf--nomid):not(.wcqf--short) .wcqf-cards .wcqf-card__mid { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; grid-column: 1 / -1; }
}
@container wcqf (min-width: 560px) {
	.wcqf:not(.wcqf--nomore) .wcqf-panel:not(:has(.wcqf-modes)) .wcqf-cards--types .wcqf-card:has(.wcqf-card__more) { align-content: start; }
	.wcqf:not(.wcqf--nomore) .wcqf-panel:not(:has(.wcqf-modes)) .wcqf-cards--types .wcqf-card:has(.wcqf-card__more) .wcqf-card__desc, .wcqf:not(.wcqf--nomore) .wcqf-panel:not(:has(.wcqf-modes)) .wcqf-cards--types .wcqf-card:has(.wcqf-card__more) .wcqf-card__mid { display: none; }
	.wcqf:not(.wcqf--nomore) .wcqf-panel:not(:has(.wcqf-modes)) .wcqf-cards--types .wcqf-card__more { display: block; grid-column: 1 / -1; }
}
@container wcqf (min-width: 760px) {
	.wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; column-gap: 14px; row-gap: 10px; padding: 18px; text-align: left; --wcqf-tile: 48px; }
	.wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more) .wcqf-card__label { font-size: 1.05em; padding-right: 20px; }
	/* The tick stays in the corner, clear of the text, in the compact layout too. */
	.wcqf .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more)[aria-pressed="true"]::after { top: 14px; right: 14px; transform: none; }
	/* Compact layout on a wide form: cargo tiles stay rows (icon beside name), the name using the tile's width. */
	.wcqf--short .wcqf-cards--types .wcqf-card__text { padding-right: 22px; }
	.wcqf--short .wcqf-cards--types .wcqf-card[aria-pressed="true"]::after { top: 8px; right: 8px; transform: none; }
	.wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more) .wcqf-card__text { display: contents; }
	.wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more) .wcqf-card__desc, .wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__more) .wcqf-card__mid { display: none; }
	.wcqf:not(.wcqf--nomore) .wcqf-cards--modes .wcqf-card__more { display: block; grid-column: 1 / -1; min-height: calc(1.45em * 4); padding-right: 8px; }
}
}
.wcqf-icon { flex: none; display: inline-flex; width: var(--wcqf-icon); height: var(--wcqf-icon); }

/* Wide forms: the cargo tiles slide in under the chosen method. */
.wcqf-types.wcqf-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; flex: 0 0 auto; margin-top: 0; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, margin-top .4s; }
.wcqf-types.wcqf-reveal.is-open { grid-template-rows: 1fr; opacity: 1; flex: 1 1 auto; margin-top: calc(var(--wcqf-gap) * 1.25); }
.wcqf-types.wcqf-reveal > .wcqf-types__in { overflow: hidden; padding: 3px; margin: -3px; }
.wcqf-icon svg, .wcqf-icon img { width: 100%; height: 100%; }
.wcqf-icon img { object-fit: contain; }

.wcqf-chosen {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; margin: 0 0 var(--wcqf-gap); padding: 6px 8px 6px 10px;
	border-radius: 999px; background: var(--wcqf-soft); font-size: .9em; font-weight: 600;
}
.wcqf-chosen .wcqf-icon { width: 18px; height: 18px; color: var(--wcqf-accent); }

/* Fields: a 6-column grid; half and third widths only where there is room */
.wcqf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wcqf-gap) calc(var(--wcqf-gap) * .875); }
/* `backwards`, not `both`: a forwards-filling opacity animation leaves the field as a stacking context for good,
   and the place list or a tooltip inside it would then paint under the fields that follow. */
.wcqf-field { grid-column: span 6; min-width: 0; animation: wcqf-in .3s ease-out backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.wcqf-field:focus-within { position: relative; z-index: 6; }
.wcqf-field:hover { position: relative; z-index: 5; }
.wcqf-w-half { grid-column: span 3; }
/* A short page: one field per row (form.js measureStack). */
.wcqf-stack .wcqf-grid > .wcqf-field { grid-column: 1 / -1; }
.wcqf-w-third { grid-column: span 2; }
.wcqf-req { color: var(--wcqf-error); font-weight: 700; }
.wcqf-label-row { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
/* Repeated question sets (vehicles): an accordion, one box per item, one open at a time */
.wcqf-item { border: 1px solid var(--wcqf-line); border-radius: var(--wcqf-radius); }
.wcqf-item + .wcqf-item { margin-top: 8px; }
.wcqf-item__head { display: flex; align-items: center; }
.wcqf-item__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wcqf-item__toggle::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 3px auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s ease; }
.wcqf-item__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -3px; }
/* One item only: its header is a plain title, with no fold arrow. */
.wcqf-single .wcqf-item__toggle { cursor: default; }
.wcqf-single .wcqf-item__toggle::after { display: none; }
.wcqf-item__title { flex: none; font-weight: 600; font-size: .95em; }
.wcqf-item__sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wcqf-muted); font-size: .85em; }
.wcqf-item__foot { display: flex; justify-content: flex-end; margin: -6px 6px 6px; }
.wcqf-item__rm { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--wcqf-radius); background: none; color: var(--wcqf-error); font: inherit; font-size: .85em; font-weight: 600; cursor: pointer; transition: background-color .15s; }
.wcqf-item__rm .wcqf-icon { width: 16px; height: 16px; }
.wcqf-item__rm:hover, .wcqf-item__rm:focus-visible { background: color-mix(in srgb, var(--wcqf-error) 10%, transparent); }
.wcqf-item__rm:focus-visible { outline: 2px solid var(--wcqf-error); outline-offset: 1px; }
.wcqf-item__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.wcqf-item__in { min-height: 0; overflow: hidden; visibility: visible; transition: visibility 0s; }
.wcqf-item__in > .wcqf-grid { padding: 2px 12px 12px; }
.wcqf-item.is-done .wcqf-item__body { grid-template-rows: 0fr; }
.wcqf-item.is-done .wcqf-item__in { visibility: hidden; transition: visibility 0s .25s; }
/* Once open, a box no longer clips, so a picker list can hang over what is below it. */
.wcqf-item.is-settled .wcqf-item__in { overflow: visible; }
/* Picker: a styled list with the page-1 icons (vehicle Type) */
.wcqf-pick { position: relative; }
.wcqf-pick__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding-right: 36px; text-align: left; cursor: pointer; }
.wcqf-pick__btn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--wcqf-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.wcqf-pick__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.wcqf-pick__btn .wcqf-icon, .wcqf-pick__opt .wcqf-icon { flex: none; width: 22px; height: 22px; color: var(--wcqf-accent); }
.wcqf-pick__none { flex: none; width: 22px; height: 22px; border: 1.5px dashed var(--wcqf-line); border-radius: 6px; }
.wcqf-pick__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcqf-pick__text.is-empty { color: var(--wcqf-muted); }
.wcqf-pick__list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 20rem); max-width: calc(100cqi - 52px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 6px; list-style: none; background: var(--wcqf-bg); border: 1px solid var(--wcqf-line); border-radius: var(--wcqf-radius); box-shadow: 0 12px 32px rgba(16, 24, 40, .18); animation: wcqf-in .15s ease-out; }
.wcqf-pick__list[hidden] { display: none; }
.wcqf-pick.is-up .wcqf-pick__list { top: auto; bottom: calc(100% + 6px); }
.wcqf-pick__opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: max(4px, calc(var(--wcqf-radius) - 4px)); cursor: pointer; outline: none; }
.wcqf-pick__opt:hover, .wcqf-pick__opt:focus { background: var(--wcqf-soft); }
.wcqf-pick__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--wcqf-accent); }
.wcqf-pick__opt[aria-selected="true"] { color: var(--wcqf-accent); font-weight: 600; background: var(--wcqf-soft); }
/* A page longer than the form scrolls inside it rather than growing it or running under the buttons. */
.wcqf-panel.wcqf-scroll { overflow-y: auto; overscroll-behavior: contain; }
.wcqf-add { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px dashed var(--wcqf-line); border-radius: var(--wcqf-radius); background: none; color: var(--wcqf-accent); font: inherit; font-weight: 600; cursor: pointer; }
.wcqf-add:hover { border-color: var(--wcqf-accent); background: var(--wcqf-soft); }
.wcqf--compact .wcqf-label-row { margin-bottom: 4px; }
.wcqf-label { display: block; margin: 0; color: var(--wcqf-text-2); font-weight: 600; font-size: .92em; }

/* Explainer: "?" beside the label. Hover/focus shows it where hover exists;
   a tap toggles it everywhere (closing on an outside tap is in form.js). */
.wcqf-tipwrap { position: static; display: inline-flex; }
.wcqf-tip-btn {
	all: unset; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
	border-radius: 50%; border: 1.5px solid var(--wcqf-line); color: var(--wcqf-muted); font-size: 12px; font-weight: 700; line-height: 1;
	cursor: help; -webkit-tap-highlight-color: transparent; position: relative;
}
/* A bigger invisible hit area for fingers without changing the look. */
.wcqf-tip-btn::after { content: ""; position: absolute; inset: -11px; }
.wcqf-tip-btn:hover, .wcqf-tipwrap.is-open .wcqf-tip-btn { border-color: var(--wcqf-accent); color: var(--wcqf-accent); }
.wcqf-tip-btn:focus-visible { outline: 2px solid var(--wcqf-accent); outline-offset: 2px; }
.wcqf-tip {
	position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); width: max-content; max-width: min(340px, 100%);
	padding: 10px 12px; border-radius: var(--wcqf-radius); background: var(--wcqf-text); color: var(--wcqf-bg);
	font-size: .86em; font-weight: 400; line-height: 1.45; box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
	visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s;
	pointer-events: none; white-space: normal; overflow-wrap: break-word;
}
.wcqf-tipwrap.is-open .wcqf-tip { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
	.wcqf-tipwrap:hover .wcqf-tip, .wcqf-tip-btn:focus-visible + .wcqf-tip { visibility: visible; opacity: 1; transform: none; }
}
.wcqf--compact .wcqf-label { margin-bottom: 4px; font-size: .88em; }
.wcqf-opt { color: var(--wcqf-muted); font-weight: 400; }
.wcqf .wcqf-input {
	width: 100%; min-height: var(--wcqf-control); margin: 0; padding: 10px 12px; color: var(--wcqf-text);
	/* 16px minimum: smaller inputs make iPhones zoom the page on focus. */
	font: inherit; font-size: max(16px, 1em);
	background: var(--wcqf-bg); border: 1.5px solid var(--wcqf-line); border-radius: var(--wcqf-radius);
	box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.wcqf--compact .wcqf-input { padding: 8px 10px; }
.wcqf textarea.wcqf-input { min-height: calc(var(--wcqf-control) * 1.8); resize: vertical; }
/* A long-text question marked `fill` (Description of goods) takes the rest of its page: its grid becomes a
   column that grows, and the box grows with it. Measured at its minimum, so it never makes the form taller. */
.wcqf-panel .wcqf-section:has(.wcqf-fill) { flex: 1 1 auto; display: flex; flex-direction: column; }
.wcqf-panel .wcqf-grid:has(> .wcqf-fill) { flex: 1 1 auto; display: flex; flex-direction: column; }
.wcqf-grid + .wcqf-grid--fill { margin-top: var(--wcqf-gap); }
/* Cargo tiles on anything wider than a phone: laid out like the method cards, the icon beside a one-line
   title and the short description underneath, in columns wide enough for the title. */
@container wcqf (min-width: 480px) {
	.wcqf .wcqf-cards--types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); --wcqf-tile-min: 72px; }
	.wcqf .wcqf-cards--types .wcqf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; column-gap: 10px; row-gap: 6px; text-align: left; }
	.wcqf .wcqf-cards--types .wcqf-card .wcqf-card__text { display: contents; }
	.wcqf .wcqf-cards--types .wcqf-card__label { min-width: 0; padding-right: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.wcqf .wcqf-cards--types .wcqf-card__desc { grid-column: 1 / -1; }
	.wcqf .wcqf-cards--types .wcqf-card[aria-pressed="true"]::after { top: 10px; right: 10px; transform: none; }
}
/* A page that is only cargo tiles (the method is fixed): the tiles keep their natural height instead of
   stretching to the form's fixed height. On a wide page they go in one row of up to four, or two even rows. */
@container wcqf (min-width: 560px) {
	.wcqf-panel:not(:has(.wcqf-modes)) > .wcqf-types { flex: 0 0 auto; }
	.wcqf-panel:not(:has(.wcqf-modes)) > .wcqf-types .wcqf-cards--types { grid-auto-rows: auto; flex: 0 0 auto; }
}
@container wcqf (min-width: 760px) {
	.wcqf-panel:not(:has(.wcqf-modes)) > .wcqf-types .wcqf-cards--types { grid-template-columns: repeat(var(--wcqf-cols-wide, 4), minmax(0, 1fr)); }
}
/* Wide form with the method and cargo on one page: method tiles take the cargo tiles' layout (icon beside the
   name, two lines of text) and the same height, so the two rows of choices match. The long method text is
   not used there; the medium one is. */
@container wcqf (min-width: 760px) {
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; column-gap: 10px; row-gap: 6px; padding: var(--wcqf-card-pad); text-align: left; --wcqf-tile: 44px; min-height: calc(var(--wcqf-tile) + 6px + 2.5em + 2 * var(--wcqf-card-pad)); }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card .wcqf-card__text { display: contents; }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card__label { min-width: 0; padding-right: 22px; font-size: 1em; }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card__more { display: none; }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card__mid, .wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card__desc { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__mid) .wcqf-card__desc { display: none; }
	.wcqf.wcqf.wcqf--nomid .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card__mid { display: none; }
	.wcqf.wcqf.wcqf--nomid .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card:has(.wcqf-card__mid) .wcqf-card__desc { display: -webkit-box; }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--modes .wcqf-card[aria-pressed="true"]::after { top: 10px; right: 10px; transform: none; }
}
/* Wide form, no method picked yet: the cargo area says what will appear there (form.js buildShipment). */
.wcqf-types-hint { display: none; }
@container wcqf (min-width: 560px) {
	.wcqf-panel > .wcqf-types-hint:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: calc(var(--wcqf-gap) * 1.25); }
	/* A method picked: the question stays, its box goes, and the tiles' own copy of the question is not shown. */
	.wcqf-panel.has-types > .wcqf-types-hint { flex: 0 0 auto; }
	.wcqf-panel.has-types > .wcqf-types-hint .wcqf-h { margin-bottom: 0; }
	.wcqf-panel.has-types .wcqf-types-hint__box { display: none; }
	.wcqf-panel > .wcqf-types-hint ~ .wcqf-types.wcqf-reveal .wcqf-types__in > .wcqf-h { display: none; }
	.wcqf-panel > .wcqf-types-hint ~ .wcqf-types.wcqf-reveal.is-open { margin-top: 6px; }
	.wcqf-panel > .wcqf-types-hint ~ .wcqf-types .wcqf-h + .wcqf-cards { margin-top: 0; }
	.wcqf-types-hint .wcqf-h { margin-bottom: calc(var(--wcqf-gap) * .8); }
	.wcqf-types-hint__box { display: grid; flex: 1 1 auto; place-items: center; min-height: 96px; margin: 0; border: 1.5px dashed var(--wcqf-line); border-radius: var(--wcqf-radius); color: var(--wcqf-muted); text-align: center; }
	.wcqf-types-hint__box > * { grid-area: 1 / 1; }
	.wcqf-types-hint__box > .wcqf-ghost { align-self: stretch; justify-self: stretch; margin: -1.5px; visibility: hidden; }
	/* On a shorter screen the form settles into its compact layout, where full-size copies would be too tall. */
	@media (max-height: 899px) { .wcqf-types-hint__box > .wcqf-ghost { display: none; } }
	.wcqf-types-hint__msg { margin: 0; padding: 16px; font-size: .92em; }
	.wcqf-panel:has(> .wcqf-types-hint:not([hidden])):not(.has-types) .wcqf-modes { flex: 0 0 auto; }
	/* Its cargo tiles (and the box's hidden copies) are one size whatever the method: they do not grow into
	   free room, and always show a short description, held to two lines so every tile has room for two. */
	.wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--types { flex: 0 0 auto; grid-auto-rows: auto; align-content: start; grid-template-columns: repeat(var(--wcqf-cols, 3), minmax(0, 1fr)); }
	.wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--types > .wcqf-notice { grid-column: auto; align-self: stretch; display: flex; align-items: center; margin: 0; }
	.wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--types > .wcqf-notice:empty { display: flex; visibility: hidden; }
	.wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--types .wcqf-card { min-height: calc(var(--wcqf-tile) + 6px + 2.5em + 2 * var(--wcqf-card-pad)); }
	.wcqf.wcqf .wcqf-panel:has(> .wcqf-types-hint) .wcqf-cards--types .wcqf-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.wcqf-panel:has(> .wcqf-types-hint) .wcqf-types__in { justify-content: flex-start; }
}
/* Help panel in the free room at the bottom of a page (form.js infoPanel / fitStage). */
.wcqf-info-slot { display: contents; }
.wcqf-panel > .wcqf-info, .wcqf-info-slot > .wcqf-info { margin-top: auto; }
/* The help box takes the page's free room above it, but never sits right against the questions. */
.wcqf-panel > :has(+ .wcqf-info:not([hidden])), .wcqf-panel > :has(+ .wcqf-info-slot > .wcqf-info:not([hidden])) { margin-bottom: var(--wcqf-gap); }
.wcqf-info { padding: 14px 16px; background: var(--wcqf-soft); border-radius: var(--wcqf-radius); color: var(--wcqf-muted); font-size: .88em; line-height: 1.45; }
.wcqf-info[hidden] { display: none; }
.wcqf-info__title { margin: 0 0 6px; color: var(--wcqf-text); font-weight: 600; }
.wcqf-info__list { margin: 0; padding-left: 1.15em; }
.wcqf-info__list li + li { margin-top: 3px; }
.wcqf-field.wcqf-fill { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.wcqf-field.wcqf-fill textarea.wcqf-input { flex: 1 1 0; min-height: 64px; resize: none; }
/* The route page's notes box stays modest: the pins above it are the point of that page. */
.wcqf-field.wcqf-fill[data-field="notes"] textarea.wcqf-input { max-height: 120px; }
.wcqf .wcqf-input:focus { outline: none; border-color: var(--wcqf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcqf-accent) 20%, transparent); }
.wcqf .has-error .wcqf-input { border-color: var(--wcqf-error); }
.wcqf-combo { display: flex; align-items: center; gap: 6px; }
.wcqf-combo .wcqf-input { flex: 1 1 0; min-width: 0; }
.wcqf-combo .wcqf-unit { flex: 0 0 auto; width: auto; padding-right: 28px; }
#quote { scroll-margin-top: var(--wcqf-scroll-margin, 80px); }
.wcqf-x { color: var(--wcqf-muted); }
/* Drawn here, not in the markup, so the sign is not read as page text. */
.wcqf-x::before { content: "×"; }
.wcqf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wcqf-pill { position: relative; margin: 0; cursor: pointer; }
/* The real input stays inside its button: left at its default spot it pokes out below and makes the page overflow. */
.wcqf-pill input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.wcqf-pill > span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 18px;
	border: 1.5px solid var(--wcqf-line); border-radius: 999px; transition: all .15s;
}
.wcqf--compact .wcqf-pill > span { min-height: 40px; padding: 0 14px; }
/* Two answers beside another question in a vehicle box: one segmented switch, as tall as the box beside it. */
.wcqf-item .wcqf-w-half .wcqf-pills { flex-wrap: nowrap; gap: 0; }
.wcqf-item .wcqf-w-half .wcqf-pill { flex: 1 1 0; min-width: 0; }
.wcqf-item .wcqf-w-half .wcqf-pill > span { width: 100%; min-width: 0; min-height: var(--wcqf-control); padding: 0 6px; border-radius: 0; white-space: nowrap; }
.wcqf-item .wcqf-w-half .wcqf-pill:first-child span { border-radius: var(--wcqf-radius) 0 0 var(--wcqf-radius); }
.wcqf-item .wcqf-w-half .wcqf-pill:last-child span { border-radius: 0 var(--wcqf-radius) var(--wcqf-radius) 0; }
.wcqf-item .wcqf-w-half .wcqf-pill + .wcqf-pill > span { margin-left: -1.5px; }
.wcqf-item .wcqf-w-half .wcqf-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcqf-pills .wcqf-item .wcqf-w-half .wcqf-pill--ico > span, .wcqf-item .wcqf-w-half .wcqf-pills .wcqf-pill.wcqf-pill--ico > span { justify-content: center; padding: 0 6px; }
.wcqf-pill input:checked + span { border-color: var(--wcqf-accent); background: var(--wcqf-accent); color: var(--wcqf-on-accent); }
.wcqf-pills--multi .wcqf-pill > span { border-radius: var(--wcqf-radius); }
/* Answers as a grid of cards, each with an optional help line, filling the question's width. */
.wcqf-pills--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
/* Four choices go 2 × 2 or in one row, never 3 + 1. */
.wcqf-pills--grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.wcqf-pills--grid .wcqf-pill > span { width: 100%; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: var(--wcqf-radius); text-align: left; }
.wcqf-pill__main { font-weight: 600; }
.wcqf-pill__sub { color: var(--wcqf-muted); font-size: .82em; line-height: 1.3; }
.wcqf-pill input:checked + span .wcqf-pill__sub { color: inherit; opacity: .85; }
/* A wide form puts short boxes side by side (form.js rowRuns). */
@container wcqf (min-width: 760px) {
	.wcqf-grid > .wcqf-run-2 { grid-column: span 3; }
	.wcqf-grid > .wcqf-run-3 { grid-column: span 2; }
}
.wcqf-pills--multi .wcqf-pill input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.wcqf-pill input:focus-visible + span { outline: 2px solid var(--wcqf-accent); outline-offset: 2px; }
.wcqf .has-error .wcqf-pill > span { border-color: var(--wcqf-error); }
.wcqf-error { margin: 6px 0 0; color: var(--wcqf-error); font-size: .85em; }
.wcqf-error:empty { display: none; }
/* In a label row the message sits at the right, so it never adds height. */
.wcqf-label-row .wcqf-error { margin: 0 0 0 auto; padding-left: 8px; text-align: right; font-size: .8em; line-height: 1.25; animation: wcqf-in .2s ease-out; }
/* "Required" shown inside a narrow box instead (setError): the label-line copy is for screen readers only. */
.is-inline-error .wcqf-label-row .wcqf-error { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-inline-error .wcqf-input::placeholder, .is-inline-error .wcqf-pick__text.is-empty { color: var(--wcqf-error); opacity: 1; }
.wcqf-label-row .wcqf-label { flex: 0 1 auto; }

/* Summary on the contact step */
.wcqf-summary { margin: 0 0 var(--wcqf-gap); padding: 12px 14px; border-radius: var(--wcqf-radius); background: var(--wcqf-soft); font-size: .92em; }
.wcqf--compact .wcqf-summary { padding: 8px 10px; }
.wcqf-summary div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wcqf-summary div + div { margin-top: 4px; }
.wcqf-summary dt { flex: 0 0 auto; min-width: 72px; color: var(--wcqf-muted); word-break: normal; overflow-wrap: normal; }
.wcqf-summary dd { flex: 1 1 200px; min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* Measuring copies are laid out on their own (contain), so reading their height never re-lays out the page around them. */
.wcqf-panel.wcqf-measure { position: absolute; inset: 0 0 auto 0; visibility: hidden; pointer-events: none; min-height: 0; flex: none; contain: layout style; }
.wcqf-panel.wcqf-measure * { transition: none !important; animation: none !important; }
.wcqf-panel.wcqf-measure .wcqf-cards { flex: none; max-height: none; }
.wcqf-review { display: grid; gap: 10px; align-items: start; }
@media (min-width: 782px) { .wcqf-review { grid-template-columns: 1fr 1fr; } }
.wcqf-review__group { padding: 12px 14px; border-radius: var(--wcqf-radius); background: var(--wcqf-soft); }
.wcqf-review__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 6px; }
.wcqf-review__title { margin: 0; font-size: 1em; font-weight: 600; }
.wcqf-review__rows { margin: 0; font-size: .92em; }
.wcqf-review__rows div { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.wcqf-review__rows div + div { margin-top: 4px; }
.wcqf-review__rows dt { flex: 0 0 auto; min-width: 110px; color: var(--wcqf-muted); }
.wcqf-review__rows dd { flex: 1 1 180px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wcqf-link { all: unset; color: var(--wcqf-accent); font-weight: 600; font-size: .9em; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wcqf-link:focus-visible { outline: 2px solid var(--wcqf-accent); outline-offset: 2px; }
.wcqf-note { margin: var(--wcqf-gap) 0 0; color: var(--wcqf-muted); font-size: .85em; }
/* Under the buttons on the last page: the privacy and tracking line with its Manage preferences link. */
.wcqf-note--foot { margin-top: 10px; font-size: .78em; line-height: 1.45; text-align: center; }
.wcqf-note--trust + .wcqf-note--foot { margin-top: 4px; }
.wcqf-note--foot .wcqf-link { font: inherit; color: inherit; text-decoration: underline; padding: 0; min-height: 0; }
/* Caution under the cargo tiles (a type's `notice`): amber, only when there is text. */
.wcqf-notice { flex: none; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--wcqf-radius); background: #fff7e6; color: #7a4b00; font-size: .85em; line-height: 1.35; animation: wcqf-in .2s ease-out; }
.wcqf-notice:empty { display: none; }
.wcqf-cards > .wcqf-notice { grid-column: 1 / -1; }
.wcqf-alert { margin: var(--wcqf-gap) 0 0; padding: 10px 14px; border-radius: var(--wcqf-radius); background: #fef3f2; color: var(--wcqf-error); }

/* Short screens (.wcqf--short, set by measure() when the tallest page would not fit the
   viewport): spacing tightens and choice tiles become rows with the icon beside the label. */
.wcqf--short .wcqf-form { --wcqf-tile: 32px; --wcqf-tile-min: 60px; --wcqf-tile-max: 84px; --wcqf-cards-gap: 8px; --wcqf-card-pad: 10px; }
.wcqf--short .wcqf-header { margin-bottom: var(--wcqf-gap); }
.wcqf--short .wcqf-progress { margin-bottom: var(--wcqf-gap); padding-bottom: calc(var(--wcqf-gap) * .75); }
.wcqf--short .wcqf-intro { margin-bottom: 10px; }
.wcqf--short .wcqf-nav { margin-top: var(--wcqf-gap); }
.wcqf--short .wcqf-panel .wcqf-cards { --wcqf-tile-max: 84px; grid-auto-rows: minmax(var(--wcqf-tile-min), auto); }
.wcqf--short .wcqf-card { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; }
.wcqf--short .wcqf-card__desc { display: none; }
.wcqf--short .wcqf-card__text { padding-right: 48px; }
.wcqf--short .wcqf-card[aria-pressed="true"]::after { top: 50%; transform: translateY(-50%); right: 16px; }

/* Buttons */
.wcqf-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: calc(var(--wcqf-gap) * 1.5); }
/* With a note beside it, the button keeps its one-line width. */

.wcqf-nav .wcqf-btn--primary { margin-left: auto; }
.wcqf-btn {
	all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center;
	min-height: var(--wcqf-control); padding: 0 22px; border-radius: var(--wcqf-radius); font-weight: 600; cursor: pointer;
	transition: filter .15s, background-color .15s; -webkit-tap-highlight-color: transparent;
}
.wcqf--compact .wcqf-btn { padding: 0 16px; }
.wcqf-btn--primary { background: var(--wcqf-accent); color: var(--wcqf-on-accent); }
.wcqf-btn--primary:hover { filter: brightness(1.08); }
.wcqf-btn--primary[disabled] { opacity: .7; cursor: progress; }
.wcqf-btn--ghost { color: var(--wcqf-text); border: 1.5px solid var(--wcqf-line); }
.wcqf-btn--ghost:hover { border-color: var(--wcqf-muted); }
.wcqf-btn:focus-visible { outline: 2px solid var(--wcqf-accent); outline-offset: 2px; }

.wcqf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation */
.wcqf-done { text-align: center; padding-block: clamp(28px, 6cqi, 56px); outline: none; }
.wcqf-done .wcqf-intro { max-width: 52ch; margin: 0 auto 24px; }
.wcqf-done__icon {
	display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
	background: var(--wcqf-accent); color: var(--wcqf-on-accent); animation: wcqf-pop .35s ease-out;
}
.wcqf--compact .wcqf-done { padding-block: clamp(18px, 4cqi, 32px); }
.wcqf--compact .wcqf-done__icon { width: 48px; height: 48px; margin-bottom: 12px; }
.wcqf-done__icon .wcqf-icon { width: 32px; height: 32px; }
.wcqf-done .wcqf-h { font-size: 1.4em; }
/* A page's callout: an icon in a soft tile and one line of text, under the heading. */
.wcqf-callout { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--wcqf-gap); padding: 12px 14px; border-radius: var(--wcqf-radius); background: var(--wcqf-soft); color: var(--wcqf-text-2); }
.wcqf-callout > .wcqf-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--wcqf-accent); color: var(--wcqf-on-accent); }
.wcqf-callout > .wcqf-icon svg { width: 22px; height: 22px; }
.wcqf-callout__title { margin: 0; font-weight: 600; color: var(--wcqf-text); line-height: 1.35; }
/* A note beside the button ("Give us a few details..."). */
/* A page with a note ends with it, and its button runs the full width of the form. */
.wcqf-nav__note { display: none; }
.wcqf-panel__note { margin: auto 0 0; padding-top: var(--wcqf-gap); color: var(--wcqf-muted); font-size: .9em; line-height: 1.4; }
.wcqf .wcqf-nav.has-note .wcqf-btn--primary { flex: 1 1 100%; width: 100%; margin-left: 0; }
.wcqf--compact .wcqf-callout { padding: 10px 12px; gap: 10px; }

/* Route: pickup and destination as two pins joined by a line (fields with `pin`: from / to). A page that is
   only the two of them spreads them over its room, the line running from pin to pin. */
.wcqf-panel:not(:has(.wcqf-fill)) > .wcqf-grid:has(> .wcqf-pin) { flex: 1 1 auto; display: flex; flex-direction: column; }
.wcqf-panel:not(:has(.wcqf-fill)) > .wcqf-grid:has(> .wcqf-pin) > .wcqf-pin { flex: 1 1 0; min-height: 0; }
.wcqf-panel:not(:has(.wcqf-fill)) > .wcqf-grid:has(> .wcqf-pin) > .wcqf-pin--from { padding-bottom: var(--wcqf-gap); }
.wcqf-pin { position: relative; padding-left: 26px; }
.wcqf-pin::before { content: ""; position: absolute; left: 3px; top: 4px; width: 12px; height: 12px; box-sizing: border-box; border: 2.5px solid var(--wcqf-accent); border-radius: 50%; background: var(--wcqf-bg); }
.wcqf-pin--to::before { background: var(--wcqf-accent); }
.wcqf-pin--from::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: calc(-1 * var(--wcqf-gap) - 2px); border-left: 2px dashed var(--wcqf-line); }
.wcqf--compact .wcqf-pin { padding-left: 22px; }

/* An answer with an icon: the glyph sits before the text, in the accent colour until the pill is picked. */
.wcqf-pills .wcqf-pill.wcqf-pill--ico > span { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.wcqf-pill--ico > span > .wcqf-icon { flex: none; width: 20px; height: 20px; color: var(--wcqf-accent); }
.wcqf-pill--ico > span > .wcqf-icon svg { width: 100%; height: 100%; }
.wcqf-pill--ico input:checked + span > .wcqf-icon { color: inherit; }
.wcqf-pills--multi .wcqf-pill--ico input:checked + span::before { content: none; }

/* Internal (staff) forms: every question is optional, so the tags would only repeat; option pills keep their own
   width (email addresses stay on one line). The page is one long list of sections, each under its set's name
   and icon with a rule between them; a staff-only section (notes, CC list) is tinted. */
.wcqf--internal .wcqf-opt { display: none; }
.wcqf--internal .wcqf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wcqf--internal .wcqf-pill > span { white-space: nowrap; }
.wcqf--internal .wcqf-pills--grid .wcqf-pill > span { width: auto; height: auto; min-height: 42px; padding: 0 16px 0 12px; }
.wcqf--internal .wcqf-pill:not(.wcqf-pill--ico) > span { padding-left: 16px; }
.wcqf--internal .wcqf-panel { gap: 0; }
.wcqf-sec { padding: calc(var(--wcqf-gap) * 1.25) 0; border-top: 1px solid var(--wcqf-line); }
.wcqf-sec:first-child { padding-top: 0; border-top: 0; }
.wcqf-sec:last-child { padding-bottom: 0; }
.wcqf-sec__h { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--wcqf-gap); color: var(--wcqf-text); font-size: 1.05em; font-weight: 600; line-height: 1.25; transition: margin .3s ease, opacity .3s ease; }
/* A section waiting on an earlier answer: heading only, dimmed, no gap under it. */
.wcqf-sec.is-empty > .wcqf-sec__h { margin-bottom: 0; opacity: .5; }
.wcqf-sec__h .wcqf-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--wcqf-soft); color: var(--wcqf-accent); }
.wcqf-sec__h .wcqf-icon svg { width: 20px; height: 20px; }
.wcqf-sec.wcqf-sec--staff { margin-top: calc(var(--wcqf-gap) * .5); padding: var(--wcqf-gap); border: 1px dashed color-mix(in srgb, var(--wcqf-accent) 40%, var(--wcqf-line)); border-radius: var(--wcqf-radius); background: color-mix(in srgb, var(--wcqf-accent) 4%, var(--wcqf-bg)); }
.wcqf-sec--staff .wcqf-sec__h::after { content: "Staff only"; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--wcqf-soft); color: var(--wcqf-accent); font-size: .72em; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.wcqf--internal .wcqf-nav { margin-top: calc(var(--wcqf-gap) * 1.25); padding-top: var(--wcqf-gap); border-top: 1px solid var(--wcqf-line); }
/* A question or section that appears slides open; one that goes folds up (form.js setHidden). Browsers without
   interpolate-size only fade. */
.wcqf--internal { interpolate-size: allow-keywords; }
.wcqf--internal :is(.wcqf-field, .wcqf-sec__body):is(.wcqf-anim, .wcqf-out) { overflow: clip; transition: height .3s ease, opacity .25s ease, translate .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease; }
@starting-style { .wcqf--internal :is(.wcqf-field, .wcqf-sec__body).wcqf-anim { height: 0; opacity: 0; translate: 0 -8px; } }
.wcqf--internal :is(.wcqf-field, .wcqf-sec__body).wcqf-out { height: 0; opacity: 0; translate: 0 -8px; padding-top: 0; padding-bottom: 0; margin: 0; border-top-width: 0; }
@media (prefers-reduced-motion: reduce) { .wcqf--internal :is(.wcqf-field, .wcqf-sec__body):is(.wcqf-anim, .wcqf-out), .wcqf-sec__h { transition: none; } }
.wcqf--internal .wcqf-nav .wcqf-btn--primary { min-width: 160px; }

/* Thank-you and "not the right fit" messages: same box size as the form they replace, content centred. */
.wcqf-done--stop, .wcqf-done--fit { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; overflow: hidden; }
.wcqf-done--stop .wcqf-h, .wcqf-done--fit .wcqf-h { margin: 0 0 8px; font-size: 1.25em; }
.wcqf-done--stop .wcqf-intro, .wcqf-done--fit .wcqf-intro { margin: 0 auto 14px; }
.wcqf-done--stop .wcqf-btn { margin-top: 8px; }
.wcqf-done--fit .wcqf-done__icon { flex: none; margin-bottom: 14px; }
/* The summary card: what was sent, in the review page's row style. */
.wcqf-done__card { flex: none; width: 100%; max-width: 560px; margin: 0 0 18px; padding: 12px 16px; border-radius: var(--wcqf-radius); background: var(--wcqf-soft); text-align: left; overflow: hidden; }
.wcqf-done__card-title { margin: 0 0 6px; font-weight: 600; }
.wcqf.wcqf .wcqf-done__card .wcqf-review__rows div { display: flex; flex-wrap: nowrap; gap: 0 12px; }
.wcqf.wcqf .wcqf-done__card .wcqf-review__rows dt { flex: 0 0 84px; min-width: 0; }
.wcqf.wcqf .wcqf-done__card .wcqf-review__rows dd { flex: 1 1 0; min-width: 0; }
.wcqf--compact .wcqf-done__card { padding: 10px 12px; }
@keyframes wcqf-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wcqf * { transition: none !important; animation: none !important; } }

/* Narrow space (phones, sidebars, small columns) */
@container wcqf (max-width: 440px) {
	.wcqf-w-half { grid-column: span 6; }
	/* Inside a vehicle box Type | Does it run? stay side by side, so an open vehicle fits a phone. */
	.wcqf-item .wcqf-w-half { grid-column: span 3; }
	/* A staff form has no height to keep: they stack, so neither is cramped. */
	.wcqf--internal .wcqf-item .wcqf-w-half { grid-column: span 6; }
}
@container wcqf (max-width: 560px) {
	.wcqf-progress__label { display: none; }
	.wcqf-progress .is-current { flex: 4 1 auto; }
	.wcqf-progress .is-current .wcqf-progress__label { display: inline; }
	/* Narrow. Method: one full-width row per choice with its help line. Cargo:
	   two tiles per row, icon above the label, so seven choices fit in four
	   short rows. (Variables go on .wcqf-form: a container query cannot style
	   its own container.) */
	.wcqf-form { --wcqf-tile: 36px; --wcqf-tile-min: 84px; --wcqf-tile-max: 120px; --wcqf-cards-gap: 8px; --wcqf-card-pad: 12px; }
	.wcqf .wcqf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcqf .wcqf-card { gap: 8px; }
	.wcqf .wcqf-cards--types .wcqf-card__desc { display: none; }
	.wcqf .wcqf-panel .wcqf-modes .wcqf-cards--modes { grid-template-columns: minmax(0, 1fr); --wcqf-tile-min: 60px; --wcqf-tile-max: 84px; }
	.wcqf .wcqf-cards--modes .wcqf-card { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; }
	.wcqf .wcqf-cards--modes .wcqf-card[aria-pressed="true"]::after { top: 50%; transform: translateY(-50%); right: 16px; }
	.wcqf .wcqf-cards--modes .wcqf-card__text { padding-right: 48px; }
	.wcqf .wcqf-cards--modes .wcqf-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
@container wcqf (max-width: 250px) {
	.wcqf .wcqf-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Row tiles (compact forms, narrow columns): on a desktop the content starts at the left so the
   icons form a column; on phones it stays centred, which reads better on a full-width row. */
@media (min-width: 782px) {
	.wcqf--short .wcqf-card { padding-left: 18px; }
	@container wcqf (max-width: 560px) { .wcqf .wcqf-cards--modes .wcqf-card { padding-left: 18px; } }
}
@media (max-width: 781px) {
	.wcqf--short .wcqf-card, .wcqf .wcqf-cards--modes .wcqf-card { justify-content: center; }
}
/* Narrow and short (a phone whose screen the form would overrun): the subtitle goes, the title
   shrinks, and tiles are tight rows. A tall label sets the height of every row in a 1fr grid,
   so the labels are kept to two short lines. */
@container wcqf (max-width: 560px) {
	.wcqf--short .wcqf-form { --wcqf-tile: 28px; --wcqf-tile-min: 50px; --wcqf-tile-max: 72px; --wcqf-cards-gap: 6px; --wcqf-card-pad: 8px; }
	.wcqf--short .wcqf-subtitle { font-size: .9em; }
	.wcqf--short.wcqf--tight .wcqf-subtitle { display: none; }
	.wcqf--short .wcqf-title { font-size: 1.25em; }
	.wcqf--short .wcqf-card { padding: 6px 10px; gap: 8px; }
	.wcqf--short .wcqf-card__label { font-size: .92em; line-height: 1.2; }
	.wcqf--short .wcqf-card__text { padding-right: 16px; }
	.wcqf--short .wcqf-cards--modes .wcqf-card__desc { display: none; }
	.wcqf--short .wcqf-panel .wcqf-modes .wcqf-cards--modes { --wcqf-tile-min: 46px; --wcqf-tile-max: 60px; }
}
@container wcqf (min-width: 480px) and (max-width: 560px) {
	.wcqf--short .wcqf-panel .wcqf-modes .wcqf-cards--modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcqf--short .wcqf-cards--types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container wcqf (max-width: 420px) {
	.wcqf-w-third { grid-column: span 6; }
	/* Year | Make | Model stay on one row inside a vehicle box, so an open vehicle fits a phone. */
	.wcqf-item .wcqf-w-third { grid-column: span 2; }
	.wcqf-form, .wcqf-done { border-radius: var(--wcqf-radius); }
	.wcqf-nav { gap: 8px; }
	.wcqf-nav .wcqf-btn { flex: 1 1 0; min-width: 0; margin-left: 0; padding-left: 8px; padding-right: 8px; }
	.wcqf-nav .wcqf-btn--ghost[hidden] ~ .wcqf-btn--primary { flex: 0 1 auto; margin-left: auto; }
	.wcqf-combo { flex-wrap: wrap; }
	.wcqf-combo .wcqf-input:not(.wcqf-unit) { flex-basis: 60px; }
}
/* Very narrow (under 320px): the dimensions row stacks fully. */
@container wcqf (max-width: 300px) {
	.wcqf-x { display: none; }
	.wcqf-combo .wcqf-input { flex-basis: 100%; }
}

/* Place suggestions (Google Places) */
.wcqf-place-box { position: relative; }
.wcqf-places {
	position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
	max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain;
	background: var(--wcqf-bg); border: 1.5px solid var(--wcqf-line); border-radius: var(--wcqf-radius);
	box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}
.wcqf-place-box.is-up .wcqf-places { top: auto; bottom: calc(100% + 4px); max-height: min(320px, 45vh); }
.wcqf-places__item {
	display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 44px; margin: 0; padding: 7px 10px;
	border-radius: calc(var(--wcqf-radius) - 2px); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wcqf-places__item:hover, .wcqf-places__item[aria-selected="true"] { background: var(--wcqf-soft); }
.wcqf-places__main { font-weight: 600; }
.wcqf-places__sub { color: var(--wcqf-muted); font-size: .86em; }
.wcqf-places__empty { padding: 10px; color: var(--wcqf-muted); font-size: .9em; }
.wcqf-places__by { padding: 6px 10px 2px; text-align: right; color: var(--wcqf-muted); font-size: .72em; }

/* Parts of a long page on narrow screens */
.wcqf .wcqf-off { display: none !important; }
.wcqf-part { color: var(--wcqf-muted); font-size: .72em; font-weight: 400; white-space: nowrap; }

/* Page icons in the progress bar */
.wcqf-progress__num.has-icon { padding: 3px; }
.wcqf-progress__num .wcqf-icon { width: 100%; height: 100%; }

/* Selected card: a tick in the corner, not just a colour change */
.wcqf-card { position: relative; }
.wcqf-card[aria-pressed="true"]::after {
	content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--wcqf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* A short fade between pages */
.wcqf-panel:not([hidden]), .wcqf-done:not([hidden]) { animation: wcqf-in .22s ease-out; }
@keyframes wcqf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Server-rendered first page (before form.js takes over): match its narrow-screen parts. */
.wcqf-ssr-narrow { display: none; }
@container wcqf (max-width: 559px) {
	.wcqf-ssr-later { display: none; }
	.wcqf-ssr-narrow { display: inline; }
}