/* ==========================================================================
   Agrivencia — working surfaces
   Eighteen sections a farm business operates rather than reads: dashboards,
   calendars, ledgers, boards, shopfronts, trackers, records. They share one
   instrument vocabulary so the platform reads as a single machine.

   Every rule here has to survive four tones (light, tint, deep, colour), so
   colour is taken from currentColor mixes and from the two plate tokens set
   per tone below rather than from a fixed neutral.
   ========================================================================== */

/* --- Tone plates -----------------------------------------------------
   --agv-plate      an opaque raised surface that belongs to its tone
   --agv-plate-2    the same surface, one step brighter, for hover
   --agv-hair       a hairline: a rule, a divider, an inactive track
   --agv-hair-2     a hairline with enough weight to read as a border
   --agv-raise      a translucent fill for a panel that is not a card
   Custom properties only, so nothing in base.css is contested.          */

.agv-section {
	--agv-plate:   var(--agv-surface);
	--agv-plate-2: var(--agv-surface-2);
	--agv-hair:    color-mix(in srgb, currentColor 12%, transparent);
	--agv-hair-2:  color-mix(in srgb, currentColor 22%, transparent);
	--agv-raise:   color-mix(in srgb, currentColor 4%, transparent);
	--agv-quiet:   var(--agv-ink-3);
	--agv-quieter: var(--agv-ink-4);
	--agv-accent:  var(--agv-mod-base);
}

.agv-section.agv-tone--tint {
	--agv-plate:   var(--agv-surface);
	--agv-plate-2: var(--agv-surface-2);
}

.agv-section.agv-tone--deep {
	--agv-plate:   color-mix(in srgb, #fff 7%, var(--agv-mod-deep));
	--agv-plate-2: color-mix(in srgb, #fff 12%, var(--agv-mod-deep));
	--agv-hair:    rgba(255, 255, 255, .14);
	--agv-hair-2:  rgba(255, 255, 255, .26);
	--agv-raise:   rgba(255, 255, 255, .06);
	--agv-quiet:   rgba(255, 255, 255, .78);
	--agv-quieter: rgba(255, 255, 255, .6);
	--agv-accent:  var(--agv-mod-glow);
}

.agv-section.agv-tone--colour {
	--agv-plate:   color-mix(in srgb, #fff 14%, var(--agv-mod-base));
	--agv-plate-2: color-mix(in srgb, #fff 22%, var(--agv-mod-base));
	--agv-hair:    rgba(255, 255, 255, .2);
	--agv-hair-2:  rgba(255, 255, 255, .34);
	--agv-raise:   rgba(255, 255, 255, .1);
	--agv-quiet:   rgba(255, 255, 255, .84);
	--agv-quieter: rgba(255, 255, 255, .66);
	--agv-accent:  #fff;
}

/* A surface painted light still wants the module colour as its accent, and
   the plate has to differ from the page ground or nothing reads as raised. */
.agv-surface.agv-tone--light { --agv-plate: var(--agv-surface-2); --agv-plate-2: var(--agv-surface-3); }

/* --- Surface shell ---------------------------------------------------- */

.agv-surface > .agv-wrap { display: grid; gap: var(--agv-s6); }

.agv-surface__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--agv-s5); flex-wrap: wrap;
	margin: 0;
}
.agv-surface__headline { max-width: 62ch; }
.agv-surface .agv-eyebrow { margin-bottom: var(--agv-s2); }
.agv-surface__title { margin: 0 0 var(--agv-s3); }
.agv-surface__intro { margin: 0; font-size: var(--agv-t-md); color: var(--agv-quiet); }
.agv-surface__flags { display: flex; gap: var(--agv-s2); flex-wrap: wrap; padding-top: .35rem; }

.agv-surface__note {
	display: flex; align-items: flex-start; gap: var(--agv-s3); flex-wrap: wrap;
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-hair);
	font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quieter);
}
.agv-surface__note p { margin: 0; flex: 1 1 30ch; }
.agv-surface__note .agv-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--agv-accent); flex: none; }

/* Buttons: ghost and outline are each drawn for one ground, so each needs
   the other ground supplied here rather than in every section block. */
:where(.agv-tone--deep, .agv-tone--colour) .agv-btn--ghost {
	color: inherit;
	background: var(--agv-raise);
	border-color: var(--agv-hair-2);
}
:where(.agv-tone--deep, .agv-tone--colour) .agv-btn--outline { border-color: var(--agv-hair-2); }

/* The quiet button: a control that must be pressable but must not compete
   with the value it sits beside. Two classes to clear components.css. */
.agv-btn.agv-btn--quiet {
	background: transparent; color: var(--agv-quiet);
	border-color: var(--agv-hair-2);
	font-weight: 560;
}
.agv-btn.agv-btn--quiet:hover { background: var(--agv-raise); color: inherit; border-color: var(--agv-hair-2); }

/* --- Badges ----------------------------------------------------------
   Marks data as sample, demonstration or awaiting a feed. cockpit.css owns
   a positioned notification badge of the same name, so position is reset
   here explicitly rather than left to cascade order.                   */

.agv-badge {
	position: static;
	top: auto; right: auto;
	display: inline-flex; align-items: center; gap: .4rem;
	min-width: 0; height: auto;
	padding: .2rem .55rem;
	background: var(--agv-warn-tint); color: color-mix(in srgb, var(--agv-warn) 70%, #000);
	border-radius: var(--agv-r-xs);
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase;
	white-space: nowrap;
}
.agv-badge__dot {
	width: 6px; height: 6px; flex: none;
	border-radius: 50%; background: var(--agv-warn);
}
.agv-badge--sample  { background: var(--agv-warn-tint); color: color-mix(in srgb, var(--agv-warn) 70%, #000); }
.agv-badge--demo    { background: var(--agv-info-tint); color: color-mix(in srgb, var(--agv-info) 78%, #000); }
.agv-badge--demo .agv-badge__dot { background: var(--agv-info); }
.agv-badge--pending { background: var(--agv-surface-3); color: var(--agv-ink-3); }
.agv-badge--pending .agv-badge__dot { background: var(--agv-mute); }

/* --- State pills -----------------------------------------------------
   Semantic, and deliberately not the module accent: a warning has to read
   as a warning on a page painted orange. Kept as light chips on every
   tone, because a light chip is legible on both grounds.               */

.agv-pill.agv-pill--state {
	padding: .22rem .6rem;
	background: var(--agv-surface-3); color: var(--agv-ink-3);
	box-shadow: inset 0 0 0 1px rgba(20, 23, 15, .06);
	font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .01em;
}

.agv-pill--good,
.agv-pill--verified,
.agv-pill--eligible,
.agv-pill--agreed,
.agv-pill--done,
.agv-pill--up       { background: var(--agv-good-tint); color: color-mix(in srgb, var(--agv-good) 80%, #000); }

.agv-pill--warn,
.agv-pill--conditional { background: var(--agv-warn-tint); color: color-mix(in srgb, var(--agv-warn) 70%, #000); }

.agv-pill--bad,
.agv-pill--down,
.agv-pill--unlikely { background: var(--agv-bad-tint); color: color-mix(in srgb, var(--agv-bad) 82%, #000); }

.agv-pill--info,
.agv-pill--current,
.agv-pill--likely,
.agv-pill--expected { background: var(--agv-info-tint); color: color-mix(in srgb, var(--agv-info) 78%, #000); }

.agv-pill--flat,
.agv-pill--waiting,
.agv-pill--unverified { background: var(--agv-surface-3); color: var(--agv-ink-4); }

/* The in-progress pill earns a marker, because "current" is the one state
   the reader is scanning for. */
.agv-pill--current::before {
	content: ""; width: 6px; height: 6px; flex: none;
	border-radius: 50%; background: var(--agv-info);
}

/* --- Deltas ---------------------------------------------------------- */

.agv-delta {
	display: inline-flex; align-items: center; gap: .25rem;
	font-family: var(--agv-mono); font-size: var(--agv-t-sm); font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.agv-delta .agv-icon { width: 14px; height: 14px; flex: none; }
.agv-delta--good, .agv-delta--up   { color: var(--agv-good); }
.agv-delta--bad,  .agv-delta--down { color: var(--agv-bad); }
.agv-delta--warn                   { color: var(--agv-warn); }
.agv-delta--flat                   { color: var(--agv-quieter); }

/* On a painted ground the signal greens and reds lose contrast, so the
   direction is carried by the glyph and the figure brightens. */
:where(.agv-tone--deep, .agv-tone--colour) .agv-delta--good,
:where(.agv-tone--deep, .agv-tone--colour) .agv-delta--up { color: var(--agv-mod-glow); }
:where(.agv-tone--deep, .agv-tone--colour) .agv-delta--bad,
:where(.agv-tone--deep, .agv-tone--colour) .agv-delta--down { color: color-mix(in srgb, var(--agv-bad) 42%, #fff); }
:where(.agv-tone--deep, .agv-tone--colour) .agv-delta--warn { color: color-mix(in srgb, var(--agv-warn) 46%, #fff); }

/* --- Sparklines ------------------------------------------------------
   The line is decoration over a number already present in the text, so it
   is quiet by construction: a low-opacity area, a hairline stroke, and one
   emphasised final point.                                              */

.agv-spark {
	display: block; width: 100%; height: auto;
	color: var(--agv-accent);
	overflow: visible;
}
.agv-spark__area { opacity: .16; }
.agv-spark__line { opacity: .9; }
.agv-spark__dot  { opacity: 1; }

/* --- Quartile bar ---------------------------------------------------- */

.agv-quart {
	position: relative;
	height: 54px;
	margin: var(--agv-s3) 0 var(--agv-s2);
}
.agv-quart__track {
	position: absolute; left: 0; right: 0; top: 30px;
	height: 6px; border-radius: 3px;
	background: var(--agv-hair-2);
}
.agv-quart__box {
	position: absolute; top: 24px; height: 18px;
	min-width: 4px;
	border-radius: var(--agv-r-xs);
	background: var(--agv-mod-tint);
	box-shadow: inset 0 0 0 1px var(--agv-mod-base);
}
.agv-quart__median {
	position: absolute; top: 18px;
	width: 2px; height: 30px; margin-left: -1px;
	background: var(--agv-mod-deep);
	border-radius: 1px;
}
.agv-quart__you {
	position: absolute; top: 0; bottom: 0; width: 0;
}
.agv-quart__you::after {
	content: ""; position: absolute; left: -1px; top: 20px;
	width: 3px; height: 26px; border-radius: 2px;
	background: var(--agv-ink);
}
.agv-quart__flag {
	position: absolute; left: 50%; top: 0;
	transform: translateX(-50%);
	padding: .1rem .45rem;
	background: var(--agv-ink); color: var(--agv-surface);
	border-radius: var(--agv-r-xs);
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	white-space: nowrap;
}
.agv-quart__flag::after {
	content: ""; position: absolute; left: 50%; top: 100%;
	transform: translateX(-50%);
	border: 4px solid transparent; border-top-color: var(--agv-ink);
}
.agv-quart__absent {
	position: absolute; left: 0; right: 0; top: 2px;
	font-size: var(--agv-t-xs); font-style: italic;
	color: var(--agv-quieter);
	text-align: center;
}

/* --- Save control ---------------------------------------------------- */

.agv-save {
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 44px; padding: 0 .9rem;
	background: transparent; color: var(--agv-quiet);
	border: 1px solid var(--agv-hair-2);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm); font-weight: 620;
	transition: background var(--agv-fast) var(--agv-ease), color var(--agv-fast), border-color var(--agv-fast);
}
.agv-save:hover { background: var(--agv-raise); color: inherit; }
.agv-save .agv-icon { width: 17px; height: 17px; flex: none; }
.agv-save__on  { display: none; }
.agv-save__off { display: inline-flex; }
.agv-save[aria-pressed="true"] {
	background: var(--agv-mod-tint); color: var(--agv-mod-ink);
	border-color: var(--agv-mod-base);
}
.agv-save[aria-pressed="true"] .agv-save__on  { display: inline-flex; }
.agv-save[aria-pressed="true"] .agv-save__off { display: none; }
.agv-save[aria-pressed="true"] .agv-save__on .agv-icon { fill: currentColor; }
.agv-save__label { font-weight: 620; }
.agv-save[aria-pressed="true"] .agv-save__label { font-weight: 700; }

/* --- Filter bar ------------------------------------------------------ */

.agv-filters {
	display: flex; align-items: flex-end; gap: var(--agv-s3); flex-wrap: wrap;
	padding: var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-filters__search {
	position: relative;
	display: flex; align-items: center; gap: .45rem;
	flex: 1 1 260px; min-width: 0;
	height: 44px; padding: 0 .8rem;
	background: var(--agv-surface);
	border: 1.5px solid var(--agv-line);
	border-radius: var(--agv-r-sm);
}
.agv-filters__search:focus-within { border-color: var(--agv-mod-base); box-shadow: 0 0 0 3px var(--agv-mod-ring); }
.agv-filters__search input {
	flex: 1; min-width: 0;
	border: 0; background: transparent; outline: 0;
	color: var(--agv-ink); font-size: var(--agv-t-sm);
}
.agv-filters__icon { display: grid; place-items: center; color: var(--agv-mute); flex: none; }
.agv-filters__icon .agv-icon { width: 17px; height: 17px; }

.agv-filters__set { display: flex; gap: var(--agv-s3); flex-wrap: wrap; }
.agv-filters__field { display: grid; gap: .25rem; }
.agv-filters__field > span {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-filters__field select {
	min-height: 44px; min-width: 150px; padding: 0 .7rem;
	background: var(--agv-surface); color: var(--agv-ink);
	border: 1.5px solid var(--agv-line); border-radius: var(--agv-r-sm);
}
.agv-filters__field select:focus-visible { outline: 3px solid var(--agv-mod-base); outline-offset: 2px; }

.agv-filters__actions { display: flex; gap: var(--agv-s2); }
.agv-filters__actions .agv-btn--sm { min-height: 44px; padding: 0 1rem; font-size: var(--agv-t-sm); }

@media (max-width: 700px) {
	.agv-filters { padding: var(--agv-s3); }
	.agv-filters__set { display: grid; grid-template-columns: 1fr; width: 100%; }
	.agv-filters__field select { width: 100%; min-width: 0; }
	.agv-filters__actions { width: 100%; }
	.agv-filters__actions .agv-btn { flex: 1; }
}

/* --- Horizontal scroller ---------------------------------------------
   Wide content scrolls inside its own box so the page body never does.
   The shadow is painted with background-attachment: local, which is the
   one way to show "there is more to the right" without script.         */

.agv-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
	background:
		linear-gradient(to right, var(--agv-plate) 30%, transparent) left center / 44px 100% no-repeat local,
		linear-gradient(to left,  var(--agv-plate) 30%, transparent) right center / 44px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(20, 23, 15, .14), transparent) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(20, 23, 15, .14), transparent) right center / 14px 100% no-repeat scroll,
		var(--agv-plate);
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}
.agv-tone--deep .agv-scroll,
.agv-tone--colour .agv-scroll {
	background:
		linear-gradient(to right, var(--agv-plate) 30%, transparent) left center / 44px 100% no-repeat local,
		linear-gradient(to left,  var(--agv-plate) 30%, transparent) right center / 44px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .3), transparent) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .3), transparent) right center / 14px 100% no-repeat scroll,
		var(--agv-plate);
}

/* --- Tables ----------------------------------------------------------
   Real table craft: hairline row rules rather than a box around every
   cell, generous row height, a hover tint, numeric columns right-aligned
   with tabular figures, and the row header pinned while the table is
   scrolled sideways — which is the axis these tables actually scroll on,
   so a sticky thead would pin to nothing.                              */

.agv-scroll .agv-table {
	background: transparent;
	border-radius: 0;
	font-size: var(--agv-t-sm);
	border-collapse: separate;
	border-spacing: 0;
}
.agv-scroll .agv-table th,
.agv-scroll .agv-table td {
	padding: .85rem 1rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--agv-hair);
	color: inherit;
}
.agv-scroll .agv-table thead th {
	position: relative;
	background: var(--agv-plate-2);
	border-bottom: 1px solid var(--agv-hair-2);
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--agv-quieter);
	white-space: nowrap;
}
.agv-scroll .agv-table tbody th[scope="row"] {
	position: sticky; left: 0; z-index: 1;
	background: var(--agv-plate);
	font-weight: 640; color: inherit;
	box-shadow: 1px 0 0 var(--agv-hair);
}
.agv-scroll .agv-table tbody tr:last-child th,
.agv-scroll .agv-table tbody tr:last-child td { border-bottom: 0; }
.agv-scroll .agv-table tbody tr:hover th[scope="row"] { background: var(--agv-plate-2); }
.agv-scroll .agv-table tbody tr:hover td { background: var(--agv-raise); }
.agv-scroll .agv-table a { color: inherit; text-decoration-color: var(--agv-hair-2); }
.agv-scroll .agv-table a:hover { color: var(--agv-accent); text-decoration-color: currentColor; }

/* Numeric columns. The head is right-aligned to sit over its figures. */
.agv-table__numhead { text-align: right; }
.agv-scroll .agv-table th.agv-table__numhead { text-align: right; }

.agv-num {
	font-family: var(--agv-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.agv-scroll .agv-table td.agv-num { text-align: right; white-space: nowrap; }

/* --- Chips -----------------------------------------------------------
   cockpit.css draws a chip for the dark header; inside a section a chip
   needs its own ground, so it is scoped rather than redefined.         */

.agv-section .agv-chip {
	height: auto; padding: .2rem .55rem;
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-xs);
	color: var(--agv-quiet);
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
}
.agv-section a.agv-chip:hover {
	background: var(--agv-mod-tint); color: var(--agv-mod-ink);
	border-color: var(--agv-mod-base);
}
.agv-section .agv-chip .agv-icon { width: 13px; height: 13px; opacity: .7; }

/* --- Callout --------------------------------------------------------- */

.agv-callout {
	display: flex; align-items: flex-start; gap: var(--agv-s4);
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-left: 3px solid var(--agv-mod-base);
	border-radius: 0 var(--agv-r) var(--agv-r) 0;
}
.agv-callout__icon {
	display: grid; place-items: center;
	width: 40px; height: 40px; flex: none;
	border-radius: var(--agv-r-sm);
	background: var(--agv-mod-tint); color: var(--agv-mod-shade);
}
.agv-callout__icon .agv-icon { width: 20px; height: 20px; }
.agv-callout__body { display: grid; gap: .35rem; }
.agv-callout__head { margin: 0; font-size: var(--agv-t-md); }
.agv-callout__text { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }
.agv-tone--deep .agv-callout__icon,
.agv-tone--colour .agv-callout__icon { background: var(--agv-raise); color: inherit; }

/* --- Numbered list --------------------------------------------------- */

.agv-numlist {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--agv-s2);
	counter-reset: agv-numlist;
}
.agv-numlist__item {
	display: grid; grid-template-columns: 34px 1fr; gap: var(--agv-s4);
	align-items: start;
	margin: 0; padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-hair);
}
.agv-numlist__item:last-child { border-bottom: 0; }
.agv-numlist__num {
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--agv-mod-tint); color: var(--agv-mod-ink);
	font-family: var(--agv-mono); font-size: var(--agv-t-sm); font-weight: 700;
}
.agv-tone--deep .agv-numlist__num,
.agv-tone--colour .agv-numlist__num { background: var(--agv-raise); color: inherit; }
.agv-numlist__text { display: grid; gap: .2rem; }
.agv-numlist__label { font-size: var(--agv-t-base); font-weight: 640; }
.agv-numlist__detail { font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

/* --- Feature, provenance, licence and credential lists ---------------
   Four lists with the same shape: a mark, a label, a detail. They differ
   in what the mark means, so they differ in the colour of the mark and in
   nothing else.                                                        */

.agv-featurelist,
.agv-provlist,
.agv-licences {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--agv-s3);
}
.agv-featurelist--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--agv-s3) var(--agv-s6); }

.agv-featurelist__item,
.agv-provlist__item,
.agv-licences__row {
	display: grid; grid-template-columns: 24px 1fr; gap: var(--agv-s3);
	align-items: start; margin: 0;
}
.agv-featurelist__icon,
.agv-provlist__icon,
.agv-licences__mark {
	display: grid; place-items: center;
	width: 22px; height: 22px; margin-top: 1px;
	border-radius: 50%;
	background: var(--agv-mod-tint); color: var(--agv-mod-shade);
}
.agv-provlist__icon  { background: var(--agv-info-tint); color: var(--agv-info); }
.agv-licences__mark  { background: var(--agv-good-tint); color: var(--agv-good); }
.agv-featurelist__icon .agv-icon,
.agv-provlist__icon .agv-icon,
.agv-licences__mark .agv-icon { width: 13px; height: 13px; }

.agv-featurelist__text,
.agv-provlist__text,
.agv-licences__text { display: grid; gap: .15rem; }
.agv-featurelist__label,
.agv-provlist__label,
.agv-licences__label { font-size: var(--agv-t-sm); font-weight: 660; }
.agv-featurelist__detail,
.agv-provlist__detail,
.agv-licences__detail { font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

.agv-credlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.agv-credlist__item {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--agv-s4);
	margin: 0; padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-hair);
}
.agv-credlist__item:last-child { border-bottom: 0; }
.agv-credlist__label { font-size: var(--agv-t-sm); font-weight: 620; }

/* Ticks inside a surface follow the surface accent rather than the page. */
.agv-surface .agv-ticks { margin-bottom: 0; }
.agv-surface .agv-ticks .agv-icon { color: var(--agv-accent); }

/* --- Evidence panel --------------------------------------------------
   sections.css owns an evidence *tier* list; this is the evidence *panel*
   used by the vendor record — a figure with the source it came from.    */

.agv-evidence {
	display: grid; gap: .3rem; align-content: start;
	margin: 0; padding: var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-top: 2px solid var(--agv-mod-base);
	border-radius: var(--agv-r-sm);
}
.agv-evidence .agv-evidence__label {
	margin: 0;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-evidence__value {
	margin: 0;
	font-family: var(--agv-display); font-size: var(--agv-t-lg);
	font-weight: 600; line-height: 1.2;
}
.agv-evidence__source {
	display: flex; align-items: center; gap: .3rem;
	margin-top: .2rem; padding-top: var(--agv-s2);
	border-top: 1px solid var(--agv-hair);
	font-size: var(--agv-t-xs); color: var(--agv-quieter);
}
.agv-evidence__source .agv-icon { width: 13px; height: 13px; color: var(--agv-good); flex: none; }

/* --- Media band ------------------------------------------------------
   An editorial composition rather than a grid: the lead frame carries the
   subject and the supporting frames sit around it.                      */

.agv-band__composition {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--agv-s4);
}
.agv-band__item { min-width: 0; }
.agv-band__item--wide { grid-column: span 2; grid-row: span 2; }
.agv-band__item--lead .agv-media { --media-ratio: 4 / 3; }
.agv-band__item--a .agv-media,
.agv-band__item--b .agv-media,
.agv-band__item--c .agv-media,
.agv-band__item--d .agv-media { --media-ratio: 4 / 3; }

.agv-band__film {
	display: grid; gap: var(--agv-s3);
	padding-top: var(--agv-s6);
	border-top: 1px solid var(--agv-hair);
}
.agv-band__filmtitle { margin: 0; font-size: var(--agv-t-lg); }
.agv-band__filmbody { margin: 0; max-width: 62ch; font-size: var(--agv-t-md); color: var(--agv-quiet); }
.agv-band__player { max-width: 940px; }

@media (max-width: 900px) {
	.agv-band__composition { grid-template-columns: repeat(2, 1fr); }
	.agv-band__item--wide { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
	.agv-band__composition { grid-template-columns: 1fr; }
	.agv-band__item--wide { grid-column: auto; }
}

/* --- Dashboard -------------------------------------------------------
   Instrument panels, not cards: a small mono label, a generous figure, the
   movement beneath it, and the twelve-point history sitting flush at the
   base of the panel behind a hairline of the module colour at the top.
   megamenu.css owns .agv-panel as a fixed overlay, so every panel rule is
   scoped to the panel grid.                                            */

.agv-dash__views { margin-bottom: calc(var(--agv-s6) * -1 + var(--agv-s4)); }
.agv-dash__tablist {
	display: flex; gap: var(--agv-s1); flex-wrap: wrap;
	padding: 4px;
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-pill);
	width: fit-content;
	max-width: 100%;
}
.agv-dash__view {
	padding: .5rem 1rem;
	background: transparent; color: var(--agv-quiet);
	border: 0; border-radius: var(--agv-r-pill);
	font-size: var(--agv-t-sm); font-weight: 620;
	white-space: nowrap;
	transition: background var(--agv-fast) var(--agv-ease), color var(--agv-fast);
}
.agv-dash__view:hover { background: var(--agv-raise); color: inherit; }
.agv-dash__view.is-current {
	background: var(--agv-mod-base); color: var(--agv-mod-on);
	box-shadow: var(--agv-sh-1);
}
.agv-dash__view--on:hover { background: rgba(255, 255, 255, .12); }
.agv-dash__view--on.is-current { background: #fff; color: var(--agv-mod-deep); }
.agv-dash__view--on:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.agv-dash__body { display: grid; gap: var(--agv-s6); }
.agv-dash__panels.agv-grid { gap: var(--agv-s4); align-items: stretch; }
.agv-dash__panels.agv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.agv-dash__panels .agv-panel {
	position: relative;
	inset: auto;
	z-index: auto;
	display: flex; flex-direction: column; gap: var(--agv-s2);
	overflow: hidden;
	padding: var(--agv-s5);
	background: var(--agv-plate); color: inherit;
	border: 1px solid var(--agv-hair);
	border-top: 2px solid var(--agv-mod-base);
	border-radius: var(--agv-r-sm);
	animation: none;
}
.agv-panel__label {
	order: 1; margin: 0;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: var(--agv-track-wide); text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-panel__figure {
	order: 2; margin: 0;
	display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.agv-panel__value {
	font-family: var(--agv-display); font-size: clamp(2rem, 4vw, var(--agv-t-2xl));
	font-weight: 600; line-height: 1; letter-spacing: var(--agv-track-tight);
}
.agv-panel__unit { font-family: var(--agv-mono); font-size: var(--agv-t-sm); color: var(--agv-quieter); }
.agv-panel__delta { order: 3; margin: 0; }
.agv-panel__target {
	order: 4; margin: 0;
	display: flex; align-items: center; gap: .35rem;
	font-size: var(--agv-t-xs); color: var(--agv-quieter);
}
.agv-panel__target .agv-icon { width: 13px; height: 13px; color: var(--agv-accent); flex: none; }
.agv-panel__desc { order: 5; margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quiet); }

/* The trend sits flush at the base of the panel, bleeding over its padding. */
.agv-panel__trend {
	order: 9;
	margin: var(--agv-s4) calc(var(--agv-s5) * -1) calc(var(--agv-s5) * -1);
	margin-top: auto;
	line-height: 0;
	pointer-events: none;
}
.agv-panel__spark { width: 100%; height: 46px; }

.agv-dash__alerts {
	padding-top: var(--agv-s2);
	border-top: 1px solid var(--agv-hair);
}
.agv-dash__subtitle {
	display: flex; align-items: center; gap: .45rem;
	margin: 0 0 var(--agv-s3);
	font-size: var(--agv-t-md);
}
.agv-dash__subtitle .agv-icon { width: 18px; height: 18px; color: var(--agv-accent); }

.agv-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--agv-s2); }
.agv-alerts__item {
	display: grid; grid-template-columns: auto 1fr; gap: var(--agv-s3);
	align-items: start;
	margin: 0; padding: var(--agv-s3) var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-left: 3px solid var(--agv-info);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}
.agv-alerts__item--warn { border-left-color: var(--agv-warn); }
.agv-alerts__item--info { border-left-color: var(--agv-info); }
.agv-alerts__text { display: grid; gap: .15rem; min-width: 0; }
.agv-alerts__label { margin: 0; font-size: var(--agv-t-sm); font-weight: 660; }
.agv-alerts__detail { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quiet); }

.agv-dash__screen { margin-top: var(--agv-s2); }
.agv-dash__screen .agv-media--screen { --media-ratio: 16 / 9; }

@media (max-width: 700px) {
	.agv-dash__panels.agv-grid--3 { grid-template-columns: 1fr; }
	.agv-dash__tablist { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.agv-alerts__item { grid-template-columns: 1fr; }
}

/* --- Calendar --------------------------------------------------------
   A real calendar rather than a list with dates in it: the month is a
   column heading beside its entries, and the date chip carries the weight
   of a genuine day marker.                                             */

.agv-cal__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--agv-s4); flex-wrap: wrap;
	padding-bottom: var(--agv-s4);
	border-bottom: 1px solid var(--agv-hair);
}
.agv-cal__legend {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--agv-s4); flex-wrap: wrap;
}
.agv-cal__key {
	display: flex; align-items: center; gap: .4rem;
	margin: 0; font-size: var(--agv-t-sm); color: var(--agv-quiet);
}
.agv-cal__swatch {
	width: 12px; height: 12px; flex: none;
	border-radius: 3px;
	background: var(--agv-mute);
}
.agv-cal__key--scheme .agv-cal__swatch    { background: var(--agv-mod-base); }
.agv-cal__key--recurring .agv-cal__swatch { background: var(--agv-info); }
.agv-cal__key--statutory .agv-cal__swatch { background: var(--agv-warn); }
.agv-cal__actions { display: flex; gap: var(--agv-s2); }

.agv-cal__year { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--agv-s5); }
.agv-cal__month {
	display: grid; grid-template-columns: 150px 1fr; gap: var(--agv-s5);
	margin: 0;
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-hair);
}
.agv-cal__month:first-child { padding-top: 0; border-top: 0; }
.agv-cal__monthname {
	display: grid; gap: .1rem; align-content: start;
	margin: 0;
	position: sticky; top: calc(var(--agv-cockpit-h) + 1.5rem);
}
.agv-cal__monthlabel {
	font-family: var(--agv-display); font-size: var(--agv-t-lg);
	font-weight: 600; line-height: 1.1;
}
.agv-cal__monthcount {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs);
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--agv-quieter);
}

.agv-cal__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--agv-s2); }
.agv-cal__item {
	display: grid; grid-template-columns: 56px 1fr; gap: var(--agv-s4);
	align-items: start;
	margin: 0; padding: var(--agv-s3) var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-left: 3px solid var(--agv-mute);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-cal__item:hover { background: var(--agv-plate-2); }
.agv-cal__item--scheme    { border-left-color: var(--agv-mod-base); }
.agv-cal__item--recurring { border-left-color: var(--agv-info); }
.agv-cal__item--statutory { border-left-color: var(--agv-warn); }

/* The date chip is the day marker, so it is given real weight. */
.agv-cal__date {
	display: grid; place-items: center; gap: 0;
	margin: 0; padding: .35rem 0 .3rem;
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-sm);
	line-height: 1;
}
.agv-cal__day { font-size: var(--agv-t-lg); font-weight: 700; letter-spacing: -.02em; }
.agv-cal__mon {
	font-family: var(--agv-mono); font-size: 9.5px; font-weight: 650;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-cal__item--scheme .agv-cal__date    { background: var(--agv-mod-tint); border-color: var(--agv-mod-tint2); }
.agv-cal__item--statutory .agv-cal__date { background: var(--agv-warn-tint); border-color: transparent; color: color-mix(in srgb, var(--agv-warn) 70%, #000); }
.agv-cal__item--recurring .agv-cal__date { background: var(--agv-info-tint); border-color: transparent; color: color-mix(in srgb, var(--agv-info) 78%, #000); }

.agv-cal__detail { display: grid; gap: .2rem; min-width: 0; }
.agv-cal__label { margin: 0; font-family: var(--agv-font); font-size: var(--agv-t-base); font-weight: 640; line-height: 1.35; }
.agv-cal__link { color: inherit; text-decoration-color: var(--agv-hair-2); }
.agv-cal__link:hover { color: var(--agv-accent); text-decoration-color: currentColor; }
.agv-cal__window {
	display: flex; align-items: center; gap: .35rem;
	margin: 0; font-size: var(--agv-t-sm); color: var(--agv-quiet);
}
.agv-cal__window .agv-icon { width: 14px; height: 14px; flex: none; opacity: .7; }
.agv-cal__meta {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin: 0; font-size: var(--agv-t-xs); color: var(--agv-quieter);
}
.agv-cal__body { font-weight: 620; }
.agv-cal__nations { font-family: var(--agv-mono); letter-spacing: .03em; }
.agv-cal__nations::before { content: "·"; margin-right: .4rem; opacity: .6; }
.agv-cal__empty { font-size: var(--agv-t-md); font-style: italic; color: var(--agv-quieter); }

@media (max-width: 700px) {
	.agv-cal__month { grid-template-columns: 1fr; gap: var(--agv-s3); }
	.agv-cal__monthname { position: static; }
	.agv-cal__item { grid-template-columns: 48px 1fr; gap: var(--agv-s3); padding: var(--agv-s3); }
	.agv-cal__bar { align-items: flex-start; }
}

/* --- Benchmark ------------------------------------------------------- */

.agv-bench__metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.agv-bench__metric {
	margin: 0; padding: var(--agv-s5) 0;
	border-bottom: 1px solid var(--agv-hair);
}
.agv-bench__metric:first-child { padding-top: 0; }
.agv-bench__metric:last-child { border-bottom: 0; padding-bottom: 0; }
.agv-bench__metric--placed .agv-bench__label { color: inherit; }
.agv-bench__metric--unplaced { opacity: .88; }
.agv-bench__metric--unplaced .agv-quart__box { background: var(--agv-surface-3); box-shadow: inset 0 0 0 1px var(--agv-hair-2); }

.agv-bench__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--agv-s4); flex-wrap: wrap;
}
.agv-bench__label { margin: 0; font-size: var(--agv-t-md); }
.agv-bench__unit {
	margin-left: .35rem;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 500;
	letter-spacing: .03em;
	color: var(--agv-quieter);
}
.agv-bench__you {
	display: flex; align-items: baseline; gap: .5rem;
	margin: 0;
	padding: .2rem .6rem;
	background: var(--agv-mod-tint);
	border-radius: var(--agv-r-pill);
	white-space: nowrap;
}
.agv-bench__youlabel {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-mod-shade);
}
.agv-bench__you .agv-num { font-size: var(--agv-t-sm); font-weight: 700; color: var(--agv-mod-ink); }
.agv-bench__detail { margin: .3rem 0 0; max-width: 74ch; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }
.agv-bench__scale {
	display: flex; justify-content: space-between; gap: var(--agv-s3); flex-wrap: wrap;
	margin: 0;
	font-size: var(--agv-t-xs); color: var(--agv-quieter);
}
.agv-bench__scale .agv-num { font-weight: 650; color: var(--agv-quiet); }

.agv-bench__cohort {
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-bench__subtitle {
	display: flex; align-items: center; gap: .45rem;
	margin: 0 0 var(--agv-s4);
	font-size: var(--agv-t-md);
}
.agv-bench__subtitle .agv-icon { width: 18px; height: 18px; color: var(--agv-accent); }
.agv-bench__deflist { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--agv-s4); }
.agv-bench__defpair { display: grid; gap: .15rem; }
.agv-bench__defpair dt {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-bench__defpair dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; }

@media (max-width: 700px) {
	.agv-bench__head { flex-direction: column; align-items: flex-start; gap: var(--agv-s2); }
	.agv-bench__scale { font-size: 10px; }
}

/* --- Ledger ---------------------------------------------------------- */

.agv-table.agv-table--ledger { min-width: 660px; }
.agv-ledger__row { transition: background var(--agv-fast) var(--agv-ease); }
.agv-ledger__when { width: 8.5rem; color: var(--agv-quiet); }
.agv-scroll .agv-table .agv-ledger__label { min-width: 15rem; }
.agv-ledger__source { color: var(--agv-quiet); }
.agv-ledger__amount { font-weight: 700; font-size: var(--agv-t-base); }
.agv-ledger__state { white-space: nowrap; }

/* The state carries a hairline on the leading edge of the row, which is
   cheaper than tinting the whole row and still scans down the column. */
.agv-scroll .agv-table .agv-ledger__row th[scope="row"] { box-shadow: inset 3px 0 0 transparent, 1px 0 0 var(--agv-hair); }
.agv-scroll .agv-table .agv-ledger__row--agreed th[scope="row"]   { box-shadow: inset 3px 0 0 var(--agv-good), 1px 0 0 var(--agv-hair); }
.agv-scroll .agv-table .agv-ledger__row--expected th[scope="row"] { box-shadow: inset 3px 0 0 var(--agv-info), 1px 0 0 var(--agv-hair); }
.agv-scroll .agv-table .agv-ledger__row--eligible th[scope="row"] { box-shadow: inset 3px 0 0 var(--agv-warn), 1px 0 0 var(--agv-hair); }

.agv-ledger__totals {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--agv-s4);
}
.agv-ledger__total {
	display: grid; gap: .2rem;
	margin: 0; padding: var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-top: 2px solid var(--agv-mod-base);
	border-radius: var(--agv-r-sm);
}
.agv-ledger__totalvalue {
	font-family: var(--agv-display); font-size: var(--agv-t-xl);
	font-weight: 600; line-height: 1;
}
.agv-ledger__totallabel { font-size: var(--agv-t-sm); line-height: 1.45; color: var(--agv-quiet); }

.agv-ledger__key { padding-top: var(--agv-s2); }
.agv-ledger__subtitle { margin: 0 0 var(--agv-s3); font-size: var(--agv-t-md); }
.agv-ledger__keylist { margin: 0; display: grid; gap: var(--agv-s3); }
.agv-ledger__keypair {
	display: grid; grid-template-columns: 10rem 1fr; gap: var(--agv-s4);
	align-items: baseline;
}
.agv-ledger__keypair dt { margin: 0; }
.agv-ledger__keypair dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

@media (max-width: 700px) {
	.agv-ledger__keypair { grid-template-columns: 1fr; gap: .3rem; }
}

/* --- Exchange board -------------------------------------------------- */

.agv-table.agv-table--board { min-width: 760px; }
.agv-board__name { min-width: 13rem; }
.agv-board__price { width: 9rem; }
.agv-board__value { font-weight: 700; font-size: var(--agv-t-base); }
.agv-board__unit {
	display: block;
	font-size: var(--agv-t-xs); font-weight: 500;
	color: var(--agv-quieter);
}
.agv-board__change { width: 7rem; }
.agv-board__trend { width: 7rem; }
.agv-board__spark { width: 90px; height: 24px; margin-left: auto; }
.agv-board__source { color: var(--agv-quiet); }
.agv-board__updated {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs);
	letter-spacing: .02em;
	color: var(--agv-quieter);
	white-space: nowrap;
}
.agv-board__blank { color: var(--agv-quieter); opacity: .7; }
.agv-board__empty { font-size: var(--agv-t-md); font-style: italic; color: var(--agv-quiet); }

/* A moving line earns a tinted trend cell; a flat one does not. */
.agv-board__line--up .agv-board__spark   { color: var(--agv-mod-glow); }
.agv-board__line--down .agv-board__spark { color: color-mix(in srgb, var(--agv-bad) 42%, #fff); }
.agv-board__line--flat .agv-board__spark { color: currentColor; opacity: .5; }
.agv-board__line--flat .agv-board__value { font-weight: 640; }

/* --- Shopfront ------------------------------------------------------- */

.agv-shopfront__cats { list-style: none; margin: 0; padding: 0; }
.agv-shopfront__cat { margin: 0; display: flex; }

.agv-shopcard {
	display: flex; flex-direction: column; width: 100%;
	overflow: hidden;
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
	text-decoration: none; color: inherit;
	transition: transform var(--agv-fast) var(--agv-ease),
	            box-shadow var(--agv-fast),
	            border-color var(--agv-fast);
}
.agv-shopcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--agv-sh-3);
	border-color: var(--agv-mod-base);
	color: inherit;
}
.agv-shopcard:focus-visible { outline: 3px solid var(--agv-mod-base); outline-offset: 2px; }
.agv-shopcard__media { display: block; }
.agv-shopcard__media .agv-media--card { --media-ratio: 3 / 2; border-radius: 0; }
.agv-shopcard__body { display: grid; gap: .3rem; padding: var(--agv-s4); }
.agv-shopcard__top { display: flex; align-items: center; gap: .5rem; }
.agv-shopcard__icon {
	display: grid; place-items: center;
	width: 30px; height: 30px; flex: none;
	border-radius: var(--agv-r-xs);
	background: var(--agv-mod-tint); color: var(--agv-mod-shade);
}
.agv-shopcard__icon .agv-icon { width: 16px; height: 16px; }
.agv-shopcard__name { font-family: var(--agv-display); font-size: var(--agv-t-md); font-weight: 600; line-height: 1.25; }
.agv-shopcard__count {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .04em;
	color: var(--agv-mod-shade);
}
.agv-shopcard__note { font-size: var(--agv-t-sm); line-height: 1.5; color: var(--agv-quiet); }

.agv-shopfront__cap {
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-shopfront__caphead { margin: 0 0 var(--agv-s4); font-size: var(--agv-t-md); }

/* --- Product detail --------------------------------------------------
   sections.css styles .agv-product as a marketplace *card*; here the same
   class is the detail *section*, so the card treatment is undone with a
   two-class selector rather than by renaming shipped markup.           */

.agv-section.agv-product {
	display: block;
	padding: var(--agv-section-y) 0;
	gap: 0;
	background: var(--agv-surface);
	border: 0; border-radius: 0;
}
.agv-product__split {
	display: grid; grid-template-columns: 1.15fr 1fr;
	gap: var(--agv-s7);
	align-items: start;
	margin-bottom: var(--agv-s7);
}
.agv-product__gallery { display: grid; gap: var(--agv-s3); position: sticky; top: calc(var(--agv-cockpit-h) + 1.5rem); }
.agv-product__lead .agv-media--lead { --media-ratio: 4 / 3; border-radius: var(--agv-r-lg); }
.agv-product__thumbs {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: var(--agv-s2);
}
.agv-product__thumb { margin: 0; }
.agv-product__thumb .agv-media--thumb { --media-ratio: 1; border-radius: var(--agv-r-sm); }

.agv-product__buy { display: grid; gap: var(--agv-s4); align-content: start; }
.agv-section.agv-product .agv-product__title { margin: 0; font-size: clamp(1.75rem, 3.4vw, var(--agv-t-2xl)); line-height: 1.1; }
.agv-product__flags { margin: 0; }

.agv-product__price {
	display: grid; gap: .2rem;
	padding: var(--agv-s4);
	background: var(--agv-mod-wash);
	border-left: 3px solid var(--agv-mod-base);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}
.agv-product__figure { margin: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.agv-product__value {
	font-family: var(--agv-display); font-size: var(--agv-t-2xl);
	font-weight: 600; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.agv-product__unit { font-style: normal; font-family: var(--agv-mono); font-size: var(--agv-t-sm); color: var(--agv-ink-3); }
.agv-product__pricenote { margin: 0; font-size: var(--agv-t-xs); line-height: 1.5; color: var(--agv-ink-4); }

.agv-section.agv-product .agv-product__vendor {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin: 0;
	padding: var(--agv-s3) var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line-2);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm); color: var(--agv-ink-2);
}
.agv-product__vicon { display: grid; place-items: center; color: var(--agv-mod-base); }
.agv-product__vicon .agv-icon { width: 18px; height: 18px; }
.agv-product__vname { font-weight: 680; }
.agv-product__vplace { color: var(--agv-ink-4); }
.agv-product__vplace::before { content: "·"; margin-right: .4rem; opacity: .6; }
.agv-product__vsince { flex-basis: 100%; font-size: var(--agv-t-xs); color: var(--agv-ink-4); }

.agv-product__specs { margin: 0; display: grid; gap: 0; }
.agv-product__spec {
	display: grid; grid-template-columns: 11rem 1fr; gap: var(--agv-s4);
	padding: .6rem 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-product__spec:last-child { border-bottom: 0; }
.agv-product__spec dt {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-ink-4);
	align-self: center;
}
.agv-product__spec dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; }

.agv-product__actions { display: flex; gap: var(--agv-s3); flex-wrap: wrap; }
.agv-product__prov {
	padding-top: var(--agv-s6);
	border-top: 1px solid var(--agv-line);
}
.agv-product__provhead { margin: 0 0 var(--agv-s4); font-size: var(--agv-t-lg); }

@media (max-width: 900px) {
	.agv-product__split { grid-template-columns: 1fr; gap: var(--agv-s6); }
	.agv-product__gallery { position: static; }
}
@media (max-width: 700px) {
	.agv-product__spec { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Vendor profile --------------------------------------------------
   As with the product, .agv-vendor is a card in sections.css and a section
   here, so the card treatment is undone on the section element.        */

.agv-surface.agv-vendor {
	display: block;
	padding-block: var(--agv-section-y);
	gap: 0;
	background: var(--agv-surface);
	border: 0; border-radius: 0;
}
.agv-vendor__body {
	display: grid; grid-template-columns: 1.5fr 1fr;
	gap: var(--agv-s7);
	align-items: start;
}
.agv-vendor__main { display: grid; gap: var(--agv-s6); min-width: 0; }
.agv-vendor__panels { list-style: none; margin: 0; padding: 0; }
.agv-vendor__creds {
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-vendor__credhead { margin: 0 0 var(--agv-s3); font-size: var(--agv-t-md); line-height: 1.3; }
.agv-vendor__aside { position: sticky; top: calc(var(--agv-cockpit-h) + 1.5rem); }
.agv-vendor__aside .agv-media--vendor { --media-ratio: 4 / 5; border-radius: var(--agv-r-lg); }

@media (max-width: 900px) {
	.agv-vendor__body { grid-template-columns: 1fr; }
	.agv-vendor__aside { position: static; order: -1; }
	.agv-vendor__aside .agv-media--vendor { --media-ratio: 16 / 9; }
}

/* --- Booking --------------------------------------------------------- */

.agv-booking__options { list-style: none; margin: 0; padding: 0; }
.agv-booking__option { margin: 0; display: flex; }

.agv-bookcard {
	display: flex; flex-direction: column; gap: var(--agv-s3); width: 100%;
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
	transition: box-shadow var(--agv-fast) var(--agv-ease), border-color var(--agv-fast);
}
.agv-bookcard:hover { box-shadow: var(--agv-sh-2); border-color: var(--agv-mod-base); }
.agv-bookcard__name { margin: 0; font-size: var(--agv-t-md); line-height: 1.25; }
.agv-bookcard__facts { margin: 0; display: grid; gap: .3rem; }
.agv-bookcard__fact { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--agv-s3); align-items: baseline; }
.agv-bookcard__fact dt {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-bookcard__fact dd { margin: 0; font-size: var(--agv-t-sm); font-weight: 620; }
.agv-bookcard__note { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quiet); }
.agv-bookcard .agv-btn--block { margin-top: auto; }

.agv-booking__licences {
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-left: 3px solid var(--agv-good);
	border-radius: 0 var(--agv-r) var(--agv-r) 0;
}
.agv-booking__lichead { margin: 0 0 var(--agv-s2); font-size: var(--agv-t-md); }
.agv-booking__licintro { margin: 0 0 var(--agv-s4); max-width: 70ch; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

.agv-booking__policies {
	margin: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--agv-s4);
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-hair);
}
.agv-booking__policy { display: grid; gap: .15rem; }
.agv-booking__policy dt {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-booking__policy dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; }

@media (max-width: 700px) {
	.agv-bookcard__fact { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Order status ----------------------------------------------------
   The track draws its own connector between markers, and the three states
   differ in fill as well as in colour, so the sequence survives print and
   colour blindness.                                                    */

.agv-status__strip {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--agv-s4); flex-wrap: wrap;
	padding: var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-status__title { margin: 0; font-size: var(--agv-t-md); font-weight: 660; }
.agv-status__ref { display: flex; align-items: center; gap: var(--agv-s3); flex-wrap: wrap; margin: 0; }
.agv-status__reflabel {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-status__refvalue {
	padding: .25rem .55rem;
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-xs);
	font-family: var(--agv-mono); font-size: var(--agv-t-sm); font-weight: 650;
	letter-spacing: .04em;
}
.agv-status__copy { flex: none; }

.agv-track { list-style: none; margin: 0; padding: 0; }
.agv-track__step {
	position: relative;
	display: grid; grid-template-columns: 34px 1fr; gap: var(--agv-s4);
	margin: 0; padding-bottom: var(--agv-s5);
}
.agv-track__step:last-child { padding-bottom: 0; }
.agv-track__step::before {
	content: ""; position: absolute;
	left: 16px; top: 34px; bottom: 0;
	width: 2px;
	background: var(--agv-hair-2);
}
.agv-track__step:last-child::before { display: none; }
.agv-track__step--done::before { background: var(--agv-mod-base); }

.agv-track__marker {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--agv-plate);
	box-shadow: inset 0 0 0 2px var(--agv-hair-2);
}
.agv-track__marker .agv-icon { width: 16px; height: 16px; }
.agv-track__marker--done {
	background: var(--agv-mod-base); color: var(--agv-mod-on);
	box-shadow: none;
}
.agv-track__marker--current {
	background: var(--agv-plate); color: var(--agv-mod-base);
	box-shadow: inset 0 0 0 3px var(--agv-mod-base), 0 0 0 4px var(--agv-mod-ring);
}
.agv-track__marker--current .agv-icon { width: 12px; height: 12px; }
.agv-track__marker--waiting {
	background: transparent; color: var(--agv-quieter);
	box-shadow: inset 0 0 0 2px var(--agv-hair-2);
}
.agv-track__marker--waiting .agv-icon { opacity: .6; }

.agv-track__body { display: grid; gap: .2rem; padding-top: .3rem; min-width: 0; }
.agv-track__head { display: flex; align-items: center; gap: var(--agv-s3); flex-wrap: wrap; }
.agv-track__label { font-size: var(--agv-t-base); font-weight: 660; }
.agv-track__when { font-family: var(--agv-mono); font-size: var(--agv-t-xs); letter-spacing: .03em; color: var(--agv-quieter); }
.agv-track__detail { font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); max-width: 74ch; }
.agv-track__step--waiting .agv-track__label { color: var(--agv-quiet); }
.agv-track__step--current .agv-track__label { font-weight: 700; }

.agv-status__meta {
	margin: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--agv-s4);
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-hair);
}
.agv-status__metarow { display: grid; gap: .15rem; }
.agv-status__metarow dt {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-status__metarow dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.5; }
.agv-status__actions { display: flex; gap: var(--agv-s3); flex-wrap: wrap; }

@media (max-width: 700px) {
	.agv-status__strip { flex-direction: column; align-items: flex-start; }
	.agv-track__step { grid-template-columns: 28px 1fr; gap: var(--agv-s3); }
	.agv-track__step::before { left: 13px; top: 30px; }
	.agv-track__marker { width: 28px; height: 28px; }
}

/* --- Account --------------------------------------------------------- */

.agv-account__subhead { margin: 0 0 var(--agv-s4); font-size: var(--agv-t-md); }
.agv-account__ids,
.agv-account__setup,
.agv-account__tiers { min-width: 0; }
.agv-account__idgrid { list-style: none; margin: 0; padding: 0; }

.agv-idcard {
	display: grid; gap: .3rem; align-content: start;
	margin: 0; padding: var(--agv-s4);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-left: 3px solid var(--agv-mod-base);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}
.agv-idcard__label { margin: 0; font-size: var(--agv-t-base); font-weight: 660; line-height: 1.3; }
.agv-idcard__scope {
	display: flex; align-items: center; gap: .35rem;
	margin: 0;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 600;
	letter-spacing: .04em;
	color: var(--agv-mod-shade);
}
.agv-idcard__scope .agv-icon { width: 13px; height: 13px; flex: none; }
.agv-idcard__hint { font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quiet); }

.agv-account__delegation { margin: 0; }

/* Tiers are a scrolling row rather than a grid: they are compared against
   each other, and a wrapped grid breaks the comparison. */
.agv-tierrow {
	list-style: none; margin: 0; padding: var(--agv-s4);
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
	gap: var(--agv-s4);
	align-items: stretch;
	min-width: min-content;
}
.agv-tierrow__item {
	position: relative;
	display: flex; flex-direction: column; gap: var(--agv-s2);
	margin: 0; padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-lg);
}
.agv-tierrow__item.is-featured { border-color: var(--agv-mod-base); border-width: 2px; box-shadow: var(--agv-sh-2); }
.agv-tierrow__flag {
	position: absolute; top: -11px; left: var(--agv-s5);
	margin: 0; padding: 3px 10px;
	background: var(--agv-mod-base); color: var(--agv-mod-on);
	border-radius: var(--agv-r-pill);
	font-size: var(--agv-t-xs); font-weight: 700;
	white-space: nowrap;
}
.agv-tierrow__name { margin: 0; font-size: var(--agv-t-lg); }
.agv-tierrow__price { margin: 0; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.agv-tierrow__value {
	font-family: var(--agv-display); font-size: var(--agv-t-2xl);
	font-weight: 600; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.agv-tierrow__period { font-style: normal; font-size: var(--agv-t-xs); color: var(--agv-ink-4); }
.agv-tierrow__indicative { margin: 0; font-size: var(--agv-t-xs); line-height: 1.45; color: var(--agv-ink-4); font-style: italic; }
.agv-tierrow__blurb { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-ink-3); }
.agv-tierrow__features { flex: 1; margin: var(--agv-s2) 0; }
.agv-tierrow .agv-ticks li { font-size: var(--agv-t-xs); }
.agv-tierrow__limits {
	margin: 0; padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-xs); line-height: 1.5; color: var(--agv-ink-4);
}
.agv-tierrow__limitlabel {
	display: block;
	font-family: var(--agv-mono); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-ink-3);
}

@media (max-width: 700px) {
	.agv-tierrow { grid-auto-columns: minmax(230px, 78vw); padding: var(--agv-s3); }
}

/* --- Finder ---------------------------------------------------------
   Rows, not cards. A directory is scanned down a column, so the type and
   the accreditation have to line up between rows.                      */

.agv-finder__count {
	display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
	margin: 0;
	font-size: var(--agv-t-sm); color: var(--agv-quiet);
}
.agv-finder__n {
	font-family: var(--agv-mono); font-size: var(--agv-t-md); font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: inherit;
}
.agv-finder__scope { color: var(--agv-quieter); }

.agv-finder__list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--agv-hair);
}
.agv-finder__row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) auto 20px;
	gap: var(--agv-s4);
	align-items: center;
	margin: 0; padding: var(--agv-s4) var(--agv-s3);
	border-bottom: 1px solid var(--agv-hair);
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-finder__row:hover { background: var(--agv-raise); }
.agv-finder__kind { justify-self: start; }
.agv-finder__main { display: grid; gap: .15rem; min-width: 0; }
.agv-finder__title { font-size: var(--agv-t-base); font-weight: 660; line-height: 1.35; }
.agv-finder__link { color: inherit; text-decoration-color: var(--agv-hair-2); }
.agv-finder__link:hover { color: var(--agv-accent); text-decoration-color: currentColor; }
.agv-finder__meta { font-size: var(--agv-t-sm); line-height: 1.5; color: var(--agv-quiet); }
.agv-finder__badges { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.agv-pill.agv-finder__badge {
	background: var(--agv-raise); color: var(--agv-quiet);
	box-shadow: inset 0 0 0 1px var(--agv-hair);
	font-weight: 620;
}
.agv-finder__go {
	display: grid; place-items: center;
	color: var(--agv-quieter);
	transition: transform var(--agv-fast) var(--agv-ease), color var(--agv-fast);
}
.agv-finder__go .agv-icon { width: 18px; height: 18px; }
.agv-finder__row:hover .agv-finder__go { transform: translateX(3px); color: var(--agv-accent); }

.agv-finder__empty {
	display: flex; align-items: flex-start; gap: var(--agv-s3);
	margin: 0; padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px dashed var(--agv-hair-2);
	border-radius: var(--agv-r);
	font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet);
	max-width: 76ch;
}
.agv-finder__empty .agv-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--agv-accent); flex: none; }

@media (max-width: 860px) {
	.agv-finder__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--agv-s2) var(--agv-s3);
		padding: var(--agv-s4) 0;
	}
	.agv-finder__kind { grid-column: 1 / -1; }
	.agv-finder__badges { grid-column: 1 / -1; justify-content: flex-start; }
	.agv-finder__go { display: none; }
}

/* --- Eligibility -----------------------------------------------------
   Renders on the module colour, so the form furniture is drawn on white
   plates and the chips read as pressable rather than as decoration.    */

.agv-elig__form {
	display: grid; gap: var(--agv-s5);
	max-width: 780px;
	padding: var(--agv-s5);
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-lg);
}
.agv-elig__q { margin: 0; padding: 0; border: 0; display: grid; gap: var(--agv-s3); }
.agv-elig__q + .agv-elig__q { padding-top: var(--agv-s5); border-top: 1px solid var(--agv-hair); }
.agv-elig__legend {
	display: flex; align-items: baseline; gap: .6rem;
	padding: 0;
	font-family: var(--agv-display); font-size: var(--agv-t-md); font-weight: 600;
	line-height: 1.3;
}
.agv-elig__num {
	display: grid; place-items: center;
	width: 24px; height: 24px; flex: none;
	border-radius: 50%;
	background: var(--agv-raise);
	box-shadow: inset 0 0 0 1px var(--agv-hair-2);
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 700;
}
.agv-elig__help { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); max-width: 66ch; }
.agv-elig__qnote {
	display: flex; align-items: flex-start; gap: .4rem;
	margin: 0; padding: .5rem .7rem;
	background: var(--agv-raise);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-xs); line-height: 1.55;
}
.agv-elig__qnote .agv-icon { width: 15px; height: 15px; margin-top: 1px; flex: none; opacity: .8; }

.agv-elig__number { display: flex; align-items: center; gap: .5rem; }
.agv-elig__input {
	width: 12rem; max-width: 100%; min-height: 46px; padding: 0 .8rem;
	background: var(--agv-surface); color: var(--agv-ink);
	border: 1.5px solid transparent; border-radius: var(--agv-r-sm);
	font-family: var(--agv-mono); font-variant-numeric: tabular-nums;
}
.agv-elig__input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.agv-elig__unit {
	font-family: var(--agv-mono); font-size: var(--agv-t-sm); font-weight: 600;
	color: var(--agv-quiet);
}

.agv-elig__chips { display: flex; gap: var(--agv-s2); flex-wrap: wrap; }
.agv-elig__chip { position: relative; display: inline-flex; }
.agv-elig__radio {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; opacity: 0; cursor: pointer;
}
.agv-elig__chiplabel {
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 1rem;
	background: var(--agv-raise);
	border: 1.5px solid var(--agv-hair-2);
	border-radius: var(--agv-r-pill);
	font-size: var(--agv-t-sm); font-weight: 620;
	cursor: pointer;
	transition: background var(--agv-fast) var(--agv-ease), border-color var(--agv-fast);
}
.agv-elig__chiplabel:hover { background: rgba(255, 255, 255, .18); }
.agv-elig__radio:checked + .agv-elig__chiplabel {
	background: #fff; color: var(--agv-mod-deep);
	border-color: #fff;
	font-weight: 700;
}
.agv-elig__radio:focus-visible + .agv-elig__chiplabel { outline: 3px solid #fff; outline-offset: 2px; }

.agv-elig__actions { display: flex; gap: var(--agv-s3); flex-wrap: wrap; }
.agv-elig__actions .agv-btn--on { min-height: 48px; }
.agv-elig__result {
	padding: var(--agv-s4);
	background: #fff; color: var(--agv-ink);
	border-radius: var(--agv-r);
	box-shadow: var(--agv-sh-2);
	font-size: var(--agv-t-sm); line-height: 1.6;
}
.agv-elig__result:empty { display: none; }

.agv-elig__key { max-width: 780px; }
.agv-elig__keytitle { margin: 0 0 var(--agv-s3); font-size: var(--agv-t-md); }
.agv-elig__outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--agv-s3); }
.agv-elig__outcome {
	display: grid; grid-template-columns: 9rem 1fr; gap: var(--agv-s4);
	align-items: baseline;
	margin: 0;
}
.agv-elig__detail { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

@media (max-width: 700px) {
	.agv-elig__form { padding: var(--agv-s4); }
	.agv-elig__outcome { grid-template-columns: 1fr; gap: .3rem; }
	.agv-elig__input { width: 100%; }
}

/* --- Trace record ----------------------------------------------------
   The chain is numbered because the order is the information, and the
   connector is drawn between markers so a stage cannot be read out of
   sequence.                                                            */

.agv-trace__batch {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--agv-s4);
	padding: var(--agv-s4) var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-trace__field { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.agv-trace__field--ref { grid-column: span 2; }
.agv-trace__flabel {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-trace__fvalue {
	display: flex; align-items: center; gap: var(--agv-s3); flex-wrap: wrap;
	font-size: var(--agv-t-base); font-weight: 620;
}
.agv-trace__ref {
	padding: .25rem .55rem;
	background: var(--agv-raise);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r-xs);
	font-family: var(--agv-mono); font-size: var(--agv-t-sm); font-weight: 700;
	letter-spacing: .06em;
}
.agv-trace__copy { flex: none; }

.agv-trace__chain { list-style: none; margin: 0; padding: 0; }
.agv-trace__link {
	position: relative;
	display: grid; grid-template-columns: 40px 1fr; gap: var(--agv-s4);
	margin: 0; padding-bottom: var(--agv-s5);
}
.agv-trace__link:last-child { padding-bottom: 0; }
.agv-trace__connector {
	position: absolute; left: 19px; top: 44px; bottom: 0;
	width: 2px;
	background: linear-gradient(var(--agv-mod-base), var(--agv-hair-2));
}
.agv-trace__link:last-child .agv-trace__connector { display: none; }
.agv-trace__step {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--agv-mod-base); color: var(--agv-mod-on);
	font-family: var(--agv-mono); font-size: var(--agv-t-md); font-weight: 700;
}
.agv-trace__body {
	display: grid; gap: var(--agv-s3);
	padding: var(--agv-s4) var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
	min-width: 0;
}
.agv-trace__stage { margin: 0; font-size: var(--agv-t-md); }
.agv-trace__rows { margin: 0; display: grid; gap: var(--agv-s2); }
.agv-trace__row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--agv-s4); align-items: baseline; }
.agv-trace__row dt {
	display: flex; align-items: center; gap: .35rem;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--agv-quieter);
}
.agv-trace__row dt .agv-icon { width: 13px; height: 13px; flex: none; }
.agv-trace__row dd { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; }

.agv-trace__exports {
	padding-top: var(--agv-s5);
	border-top: 1px solid var(--agv-hair);
}
.agv-trace__etitle { margin: 0 0 var(--agv-s3); font-size: var(--agv-t-md); }
.agv-trace__elist {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--agv-s3); flex-wrap: wrap;
}
.agv-trace__elist li { margin: 0; }
.agv-trace__export { gap: .55rem; }
.agv-trace__elabel { font-weight: 620; }
.agv-section .agv-trace__format {
	padding: .1rem .4rem;
	font-size: 10px; font-weight: 700; letter-spacing: .07em;
}
.agv-section .agv-trace__format--pdf { background: var(--agv-bad-tint); color: color-mix(in srgb, var(--agv-bad) 82%, #000); border-color: transparent; }
.agv-section .agv-trace__format--csv { background: var(--agv-good-tint); color: color-mix(in srgb, var(--agv-good) 80%, #000); border-color: transparent; }

@media (max-width: 700px) {
	.agv-trace__field--ref { grid-column: auto; }
	.agv-trace__link { grid-template-columns: 30px 1fr; gap: var(--agv-s3); }
	.agv-trace__connector { left: 14px; top: 34px; }
	.agv-trace__step { width: 30px; height: 30px; font-size: var(--agv-t-sm); }
	.agv-trace__body { padding: var(--agv-s3) var(--agv-s4); }
	.agv-trace__row { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Jobs ------------------------------------------------------------ */

.agv-table.agv-jobs__table { min-width: 720px; }
.agv-scroll .agv-jobs__table th[scope="row"] { min-width: 13rem; }
.agv-jobs__kind { white-space: nowrap; }
.agv-scroll .agv-jobs__table .agv-jobs__know { min-width: 24rem; }
.agv-scroll .agv-jobs__table td.agv-jobs__know { font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

.agv-jobs__duties {
	padding: var(--agv-s5);
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
}
.agv-jobs__dtitle { margin: 0 0 var(--agv-s4); font-size: var(--agv-t-md); }
.agv-jobs__dlist {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--agv-s4);
}
.agv-jobs__duty { display: grid; grid-template-columns: 24px 1fr; gap: var(--agv-s3); align-items: start; margin: 0; }
.agv-jobs__dicon {
	display: grid; place-items: center;
	width: 22px; height: 22px; margin-top: 1px;
	border-radius: 50%;
	background: var(--agv-good-tint); color: var(--agv-good);
}
.agv-jobs__dicon .agv-icon { width: 13px; height: 13px; }
.agv-jobs__dbody { display: grid; gap: .15rem; }
.agv-jobs__dlabel { font-size: var(--agv-t-sm); font-weight: 660; }
.agv-jobs__ddetail { font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-quiet); }

/* --- Downloads ------------------------------------------------------- */

.agv-docs__grid { align-items: stretch; }
.agv-docs__grid.agv-grid--4 { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

.agv-doccard {
	display: flex; flex-direction: column;
	overflow: hidden;
	background: var(--agv-plate);
	border: 1px solid var(--agv-hair);
	border-radius: var(--agv-r);
	transition: transform var(--agv-fast) var(--agv-ease), box-shadow var(--agv-fast);
}
.agv-doccard:hover { transform: translateY(-3px); box-shadow: var(--agv-sh-3); }
.agv-doccard__cover .agv-media--doc { --media-ratio: 3 / 4; border-radius: 0; }
.agv-doccard__body { display: grid; gap: .35rem; padding: var(--agv-s4); align-content: start; flex: 1; }
.agv-doccard__kind { justify-self: start; }
.agv-doccard__title { margin: 0; font-size: var(--agv-t-md); line-height: 1.25; }
.agv-doccard__meta {
	margin: 0;
	font-family: var(--agv-mono); font-size: var(--agv-t-xs);
	letter-spacing: .03em;
	color: var(--agv-quieter);
}
.agv-doccard__text { margin: 0; font-size: var(--agv-t-sm); line-height: 1.55; color: var(--agv-quiet); }
.agv-doccard__foot {
	padding: var(--agv-s4);
	padding-top: 0;
}
.agv-doccard__get { width: 100%; }

/* A gated document says so on the card, not after the button is pressed. */
.agv-doccard--gated { border-style: dashed; border-color: var(--agv-hair-2); }
.agv-doccard--gated .agv-doccard__kind { background: var(--agv-warn-tint); color: color-mix(in srgb, var(--agv-warn) 70%, #000); border-color: transparent; }

/* --- Search results --------------------------------------------------
   Grouped by kind, and each hit is a row so the reader does not have to
   sort a mixed grid of answers.                                        */

.agv-section.agv-results { padding-block: var(--agv-s6) var(--agv-section-y); }
.agv-section.agv-results > .agv-wrap { display: grid; gap: var(--agv-s6); }
.agv-results__head { max-width: 62ch; }
.agv-results__title { margin: 0 0 var(--agv-s3); }
.agv-results__intro { margin: 0; font-size: var(--agv-t-md); color: var(--agv-ink-3); }

.agv-results__form {
	position: relative;
	display: flex; align-items: center; gap: var(--agv-s2);
	max-width: 640px;
	padding: var(--agv-s2);
	background: var(--agv-surface);
	border: 1.5px solid var(--agv-line);
	border-radius: var(--agv-r);
	box-shadow: var(--agv-sh-1);
}
.agv-results__form:focus-within { border-color: var(--agv-mod-base); box-shadow: 0 0 0 3px var(--agv-mod-ring); }
.agv-results__icon { display: grid; place-items: center; padding-left: .5rem; color: var(--agv-mute); flex: none; }
.agv-results__icon .agv-icon { width: 18px; height: 18px; }
.agv-results__form input {
	flex: 1; min-width: 0;
	border: 0; background: transparent; outline: 0;
	font-size: var(--agv-t-base); color: var(--agv-ink);
}
.agv-results__form .agv-btn--primary { flex: none; }

.agv-results__count { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin: 0; color: var(--agv-ink-3); }
.agv-results__n {
	font-family: var(--agv-mono); font-size: var(--agv-t-md); font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink);
}

.agv-results__group { display: grid; gap: var(--agv-s3); }
.agv-results__gtitle {
	display: flex; align-items: center; gap: .6rem;
	margin: 0; padding-bottom: var(--agv-s2);
	border-bottom: 2px solid var(--agv-mod-tint2);
	font-size: var(--agv-t-base);
}
.agv-results__gname { text-transform: capitalize; }
.agv-results__gcount {
	font-family: var(--agv-mono); font-size: var(--agv-t-xs); font-weight: 650;
	padding: 1px 7px;
	background: var(--agv-mod-tint); color: var(--agv-mod-ink);
	border-radius: var(--agv-r-pill);
}

.agv-results__list { list-style: none; margin: 0; padding: 0; }
.agv-results__row {
	position: relative;
	display: grid; gap: .2rem;
	margin: 0; padding: var(--agv-s4) var(--agv-s4) var(--agv-s4) var(--agv-s5);
	border-bottom: 1px solid var(--agv-line-2);
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-results__row::before {
	content: ""; position: absolute; inset: var(--agv-s4) auto var(--agv-s4) 0;
	width: 3px; border-radius: 2px;
	background: var(--card-colour, var(--agv-mod-base));
	opacity: .6;
}
.agv-results__row:hover { background: var(--agv-surface-2); }
.agv-results__row:hover::before { opacity: 1; }
.agv-results__row:last-child { border-bottom: 0; }
.agv-results__rtitle { margin: 0; font-family: var(--agv-font); font-size: var(--agv-t-md); font-weight: 660; line-height: 1.35; }
.agv-results__rtitle a { color: inherit; text-decoration-color: var(--agv-line); }
.agv-results__rtitle a:hover { color: var(--agv-mod-shade); text-decoration-color: currentColor; }
.agv-results__summary { margin: 0; max-width: 78ch; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-ink-3); }
.agv-results__badges { margin: .2rem 0 0; display: flex; gap: .3rem; flex-wrap: wrap; }
.agv-pill.agv-results__badge {
	background: var(--agv-surface-3); color: var(--agv-ink-3);
	font-weight: 620;
}

.agv-results__empty {
	display: grid; gap: var(--agv-s2); justify-items: start;
	max-width: 70ch;
	padding: var(--agv-s6);
	background: var(--agv-surface-2);
	border: 1px dashed var(--agv-line);
	border-radius: var(--agv-r-lg);
}
.agv-results__empty .agv-icon { width: 26px; height: 26px; color: var(--agv-mod-base); }
.agv-results__etitle { margin: 0; font-size: var(--agv-t-lg); }
.agv-results__ebody { margin: 0; font-size: var(--agv-t-sm); line-height: 1.6; color: var(--agv-ink-3); }

.agv-results__suggest { display: grid; gap: var(--agv-s3); }
.agv-results__stitle { margin: 0; font-size: var(--agv-t-md); }
.agv-results__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--agv-s2); flex-wrap: wrap; }
.agv-results__chips li { margin: 0; }
.agv-section .agv-results__chip { min-height: 36px; padding: 0 .8rem; display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 700px) {
	.agv-results__form { flex-wrap: wrap; }
	.agv-results__form input { flex-basis: 100%; order: 2; padding: .5rem; }
	.agv-results__form .agv-btn--primary { order: 3; width: 100%; }
}

/* --- Focus ----------------------------------------------------------
   Every control on a surface has to show where the keyboard is. On a
   painted ground the module colour is the ground, so the ring is white. */

.agv-surface :where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--agv-mod-base);
	outline-offset: 2px;
}
:where(.agv-tone--deep, .agv-tone--colour) :where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline-color: #fff;
}

/* --- Motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.agv-shopcard,
	.agv-bookcard,
	.agv-doccard,
	.agv-finder__row,
	.agv-finder__go,
	.agv-results__row,
	.agv-cal__item,
	.agv-ledger__row,
	.agv-save,
	.agv-dash__view,
	.agv-elig__chiplabel { transition: none; }

	.agv-shopcard:hover,
	.agv-doccard:hover { transform: none; }
	.agv-finder__row:hover .agv-finder__go { transform: none; }
}

/* --- Print -----------------------------------------------------------
   These surfaces are the pages a farmer actually prints and takes to an
   adviser, so they are laid out for paper rather than hidden.          */

@media print {
	.agv-surface > .agv-wrap { gap: 1rem; }
	.agv-scroll { overflow: visible; border: 0; background: none; }
	.agv-scroll .agv-table { min-width: 0; font-size: 9pt; }
	.agv-scroll .agv-table tbody th[scope="row"] { position: static; box-shadow: none; }
	.agv-dash__views,
	.agv-filters,
	.agv-status__actions,
	.agv-trace__exports,
	.agv-doccard__foot,
	.agv-results__form,
	.agv-save,
	.agv-cal__actions { display: none; }
	.agv-dash__panels .agv-panel,
	.agv-cal__item,
	.agv-trace__body,
	.agv-evidence { break-inside: avoid; }
	.agv-panel__trend { display: none; }
	.agv-cal__monthname { position: static; }
	.agv-product__gallery,
	.agv-vendor__aside { position: static; }
	.agv-tierrow { grid-auto-flow: row; grid-auto-columns: auto; }
}