/* ==========================================================================
   Agrivencia — the application area
   Everything under /account/: the auth screens, the signed-in shell and the
   fourteen working screens inside it.

   This is not a content page. No module owns it, nothing here is painted in a
   module colour, and nothing decorative earns its place: it is the screen a
   farmer opens on a tablet in a yard with wet hands, so targets are large,
   rhythm is tight, and state is carried by colour AND by weight AND by shape
   so it survives sunlight, a cracked screen and a colour-blind reader.

   Colour comes from the neutral ground tokens and the four semantic signals.
   The one accent is --agv-brand, because the workspace belongs to the user
   rather than to a subject.
   ========================================================================== */

/* --- Tone plate ------------------------------------------------------
   surfaces.css sets --agv-plate / --agv-hair / --agv-quiet / --agv-accent on
   .agv-section, and every shared instrument (.agv-scroll, .agv-table,
   .agv-surface__note, .agv-callout) reads them. The app area is not inside a
   .agv-section, so those properties have to be established here or the shared
   vocabulary lands unpainted. Same names, same meanings, light ground only —
   the app has no deep or colour tone.                                    */

.agv-app {
	--agv-plate:   var(--agv-surface);
	--agv-plate-2: var(--agv-surface-2);
	--agv-hair:    var(--agv-line);
	--agv-hair-2:  color-mix(in srgb, var(--agv-line) 70%, var(--agv-ink-4));
	--agv-raise:   color-mix(in srgb, var(--agv-ink) 4%, transparent);
	--agv-quiet:   var(--agv-ink-3);
	--agv-quieter: var(--agv-ink-4);
	--agv-accent:  var(--agv-brand);

	/* App-local additions. A row is not a card: it gets a hairline and a
	   hover wash, never a shadow. */
	--agv-row:     var(--agv-surface);
	--agv-row-2:   var(--agv-surface-2);
	--agv-gap:     var(--agv-s5);
	--agv-rowpad:  var(--agv-s4);

	position: relative;
	padding-block: var(--agv-s6) var(--agv-s9);
	background: var(--agv-canvas);
	color: var(--agv-ink);
}

/* The account area never wants the module tint an ancestor may have set, and
   links inside it read as the house green rather than a subject colour. */
.agv-app a:not(.agv-btn):not(.agv-tile):not(.agv-appnav__link) { color: var(--agv-brand); }
.agv-app a:not(.agv-btn):not(.agv-tile):not(.agv-appnav__link):hover { color: var(--agv-brand-deep); }

.agv-app h1, .agv-app h2, .agv-app h3, .agv-app h4 { color: var(--agv-ink); }

/* Headings inside the app are working labels, not display typography: the
   serif face is right for an essay and wrong for a control panel. */
.agv-app :is(h2, h3, h4) {
	font-family: var(--agv-font);
	letter-spacing: -.012em;
}

/* ==========================================================================
   1. Shell
   ========================================================================== */

.agv-app--full > .agv-wrap { max-width: var(--agv-wrap); }

/* The auth column: one card, centred, never wider than a comfortable form. */
.agv-app--narrow { padding-block: var(--agv-s7) var(--agv-s9); }
.agv-app--narrow > .agv-wrap { max-width: 460px; }

.agv-app__layout {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: var(--agv-s7);
	align-items: start;
}

.agv-app__main {
	display: grid;
	gap: var(--agv-gap);
	min-width: 0;
	align-content: start;
}

/* Anything wide the screens drop in — a table, a stage track — scrolls inside
   its own box so the page body never does. .agv-scroll is surfaces.css's and
   is left alone; this only guarantees it cannot push the grid open. */
.agv-app__main > * { min-width: 0; }
.agv-app .agv-scroll { max-width: 100%; }

/* ==========================================================================
   2. Sidebar
   The quiet column. It has no ground of its own on desktop — a hairline on
   the right is enough separation, and paint here would compete with the work.
   ========================================================================== */

.agv-appnav {
	position: sticky;
	top: var(--agv-s4);
	display: grid;
	gap: var(--agv-s5);
	align-content: start;
	padding-right: var(--agv-s5);
	border-right: 1px solid var(--agv-line);
	min-width: 0;
}

.agv-appnav__who {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	min-width: 0;
	padding-bottom: var(--agv-s4);
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-appnav__who > div { min-width: 0; }

.agv-appnav__name {
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 660;
	line-height: 1.3;
	color: var(--agv-ink);
	overflow-wrap: anywhere;
}

.agv-appnav__holding {
	margin: .1rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.35;
	color: var(--agv-ink-4);
	overflow-wrap: anywhere;
}

/* cockpit.css draws .agv-avatar at 26px for the dark header bar. The sidebar
   wants a larger one on a light ground, so the size and palette are set with
   a two-class selector rather than by redefining the base. */
.agv-appnav .agv-avatar--lg {
	width: 38px; height: 38px;
	flex: none;
	font-size: var(--agv-t-sm);
	background: linear-gradient(140deg, var(--agv-brand-lite), var(--agv-brand-deep));
	color: var(--agv-mod-on);
}

.agv-appnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.agv-appnav__list li { margin: 0; }

.agv-appnav__link {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	min-height: 44px;
	padding: var(--agv-s2) var(--agv-s3);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm);
	font-weight: 560;
	line-height: 1.3;
	color: var(--agv-ink-2);
	text-decoration: none;
	transition: background var(--agv-fast) var(--agv-ease), color var(--agv-fast) var(--agv-ease);
}
.agv-appnav__link .agv-icon {
	width: 18px; height: 18px;
	flex: none;
	color: var(--agv-ink-4);
	transition: color var(--agv-fast) var(--agv-ease);
}
.agv-appnav__link:hover {
	background: var(--agv-surface-2);
	color: var(--agv-ink);
}
.agv-appnav__link:hover .agv-icon { color: var(--agv-brand); }

.agv-appnav__link.is-current {
	background: var(--agv-brand-tint);
	color: var(--agv-brand-deep);
	font-weight: 680;
	box-shadow: inset 2px 0 0 var(--agv-brand);
}
.agv-appnav__link.is-current .agv-icon { color: var(--agv-brand); }

.agv-appnav__out {
	display: inline-flex;
	align-items: center;
	gap: var(--agv-s2);
	min-height: 44px;
	padding: var(--agv-s2) var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-sm);
	color: var(--agv-ink-4);
	text-decoration: none;
}
.agv-appnav__out .agv-icon { width: 15px; height: 15px; flex: none; }
.agv-appnav__out:hover { color: var(--agv-ink); }

/* ==========================================================================
   3. Screen header
   ========================================================================== */

.agv-apphead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--agv-s4);
	flex-wrap: wrap;
	padding-bottom: var(--agv-s4);
	border-bottom: 1px solid var(--agv-line);
}

.agv-apphead__text { max-width: 64ch; min-width: 0; }

.agv-apphead__title {
	margin: 0;
	font-family: var(--agv-font);
	font-size: clamp(1.5rem, 3vw, var(--agv-t-xl));
	font-weight: 680;
	line-height: 1.15;
	letter-spacing: var(--agv-track-tight);
}

.agv-apphead__intro {
	margin: var(--agv-s2) 0 0;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-3);
}

.agv-apphead__actions {
	display: flex;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	padding-top: .2rem;
}

/* The auth screens get the same header, centred above the card. */
.agv-app--narrow .agv-apphead {
	display: block;
	margin-bottom: var(--agv-s5);
	padding-bottom: var(--agv-s4);
}
.agv-app--narrow .agv-apphead__title { font-size: var(--agv-t-lg); }

/* ==========================================================================
   4. Notices
   One row, one signal colour, a left edge heavy enough to find at a glance.
   The modifier is written by inc/app.php as agv-notice--%s, so the four tones
   it can emit are all declared: ok, bad, warn, info.
   ========================================================================== */

.agv-notice {
	--notice: var(--agv-info);
	--notice-tint: var(--agv-info-tint);

	display: flex;
	align-items: flex-start;
	gap: var(--agv-s3);
	padding: var(--agv-s3) var(--agv-s4);
	background: var(--notice-tint);
	border: 1px solid color-mix(in srgb, var(--notice) 26%, transparent);
	border-left: 4px solid var(--notice);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: color-mix(in srgb, var(--notice) 62%, var(--agv-ink));
}
.agv-notice p { margin: 0; }
.agv-notice .agv-icon {
	width: 18px; height: 18px;
	margin-top: 2px;
	flex: none;
	color: var(--notice);
}
.agv-notice a { color: inherit; text-decoration-thickness: 1px; }

.agv-notice--ok   { --notice: var(--agv-good); --notice-tint: var(--agv-good-tint); }
.agv-notice--bad  { --notice: var(--agv-bad);  --notice-tint: var(--agv-bad-tint); }
.agv-notice--warn { --notice: var(--agv-warn); --notice-tint: var(--agv-warn-tint); }
.agv-notice--info { --notice: var(--agv-info); --notice-tint: var(--agv-info-tint); }

/* ==========================================================================
   5. Verify banner
   A standing reminder rather than an alarm: it is shown on every screen until
   the address is confirmed, so it has to be tolerable on the hundredth view.
   ========================================================================== */

.agv-verify {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	padding: var(--agv-s4);
	background: var(--agv-warn-tint);
	border: 1px solid color-mix(in srgb, var(--agv-warn) 28%, transparent);
	border-radius: var(--agv-r-sm);
	color: color-mix(in srgb, var(--agv-warn) 66%, var(--agv-ink));
}
.agv-verify > .agv-icon {
	width: 20px; height: 20px;
	margin-top: 2px;
	flex: none;
	color: var(--agv-warn);
}
.agv-verify__body { flex: 1 1 24ch; min-width: 0; }

.agv-verify__title {
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 680;
	line-height: 1.35;
}

.agv-verify__text {
	margin: .25rem 0 0;
	font-size: var(--agv-t-sm);
	line-height: 1.55;
	color: color-mix(in srgb, var(--agv-warn) 46%, var(--agv-ink-2));
}

.agv-verify__form { flex: none; margin: 0; }

/* ==========================================================================
   6. Setup strip
   Progress towards a usable account. Quiet, because it is scaffolding: it
   disappears the moment the record is complete.
   ========================================================================== */

.agv-setup {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s4);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-setup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
}

.agv-setup__title {
	margin: 0;
	font-size: var(--agv-t-base);
	font-weight: 680;
}

.agv-setup__count {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}

.agv-setup__bar,
.agv-complete__bar,
.agv-appcard__bar {
	position: relative;
	height: 8px;
	background: var(--agv-surface-3);
	border-radius: var(--agv-r-pill);
	overflow: hidden;
}

.agv-setup__fill,
.agv-complete__fill,
.agv-appcard__fill {
	display: block;
	width: var(--pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--agv-brand), var(--agv-brand-lite));
	transition: width var(--agv-slow) var(--agv-ease-out);
}

.agv-setup__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--agv-s2) var(--agv-s4);
}

.agv-setup__step {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.35;
}
.agv-setup__step a { text-decoration: none; font-weight: 600; }
.agv-setup__step a:hover { text-decoration: underline; }

.agv-setup__mark {
	display: grid;
	place-items: center;
	width: 18px; height: 18px;
	flex: none;
	border-radius: 50%;
	background: var(--agv-surface-3);
	box-shadow: inset 0 0 0 1px var(--agv-line);
	color: var(--agv-mod-on);
}
.agv-setup__mark .agv-icon { width: 11px; height: 11px; }

.agv-setup__step--done { color: var(--agv-ink-4); }
.agv-setup__step--done .agv-setup__mark {
	background: var(--agv-good);
	box-shadow: none;
}
.agv-setup__step--todo { color: var(--agv-ink); font-weight: 560; }
.agv-setup__step--todo .agv-setup__mark {
	background: var(--agv-surface);
	box-shadow: inset 0 0 0 2px var(--agv-brand);
}
.agv-setup__step--unknown { color: var(--agv-mute); }
.agv-setup__step--unknown .agv-setup__mark {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--agv-line);
}

/* ==========================================================================
   7. Sign-in wall
   What a signed-out visitor gets where a screen would be. It is a welcome,
   not a rejection, so it is set as a card rather than an error.
   ========================================================================== */

.agv-wall {
	padding: var(--agv-s6);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-lg);
	box-shadow: var(--agv-sh-2);
	text-align: left;
}

.agv-wall__title {
	margin: 0 0 var(--agv-s3);
	font-size: var(--agv-t-lg);
	font-weight: 680;
	line-height: 1.2;
}

.agv-wall__body {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: var(--agv-ink-3);
}

.agv-wall__actions {
	display: flex;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	margin-top: var(--agv-s5);
}
.agv-wall__actions .agv-btn { flex: 1 1 auto; justify-content: center; }

.agv-wall__note {
	margin: var(--agv-s5) 0 0;
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

/* ==========================================================================
   8. Empty states
   components.css owns .agv-empty as a full-height centred block for content
   pages. Inside the app that is far too much air — a screen with nothing on
   it yet should still feel like a working screen. Two classes, deliberately,
   to clear that rule without touching it.
   ========================================================================== */

.agv-app .agv-empty {
	max-width: none;
	margin: 0;
	padding: var(--agv-s6) var(--agv-s5);
	background: var(--agv-surface);
	border: 1px dashed var(--agv-line);
	border-radius: var(--agv-r);
	text-align: left;
}

.agv-empty__title {
	margin: 0 0 var(--agv-s2);
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-empty__body {
	margin: 0;
	max-width: 64ch;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: var(--agv-ink-3);
}
.agv-empty__body + .agv-btn { margin-top: var(--agv-s4); }
.agv-app .agv-empty .agv-btn { margin-top: var(--agv-s4); }

/* ==========================================================================
   9. Forms
   These carry the product. Every control is at least 44px tall, every label
   sits above its field, help text is permanently visible rather than hidden
   behind a hint icon, and an invalid field says so on the field rather than
   only at the top of the page.
   ========================================================================== */

.agv-form {
	display: grid;
	gap: var(--agv-s4);
	margin: 0;
}

.agv-form__row {
	display: grid;
	gap: .35rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.agv-form__label {
	font-size: var(--agv-t-sm);
	font-weight: 640;
	line-height: 1.35;
	color: var(--agv-ink);
}
.agv-form__label--choice {
	font-weight: 560;
	cursor: pointer;
}

.agv-form__help {
	margin: 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-4);
}

/* --- The field itself ------------------------------------------------
   Written once for the classed inputs and once for the bare inputs inside
   .agv-hform, which has no per-field class on the control.             */

.agv-form__input,
.agv-hform input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.agv-hform select,
.agv-hform textarea,
.agv-appcard__advance select,
.agv-appcard__notes textarea {
	width: 100%;
	min-height: 44px;
	padding: .6rem .75rem;
	background: var(--agv-surface);
	color: var(--agv-ink);
	border: 1px solid var(--agv-hair-2);
	border-radius: var(--agv-r-sm);
	font-family: inherit;
	font-size: var(--agv-t-base);
	line-height: 1.4;
	box-shadow: inset 0 1px 2px color-mix(in srgb, var(--agv-ink) 5%, transparent);
	transition: border-color var(--agv-fast) var(--agv-ease), box-shadow var(--agv-fast) var(--agv-ease);
}

.agv-form__input::placeholder,
.agv-hform input::placeholder,
.agv-hform textarea::placeholder { color: var(--agv-mute); }

.agv-form__input:hover,
.agv-hform input:not([type="checkbox"]):not([type="radio"]):hover,
.agv-hform select:hover,
.agv-hform textarea:hover { border-color: var(--agv-ink-4); }

.agv-form__input:focus,
.agv-hform input:not([type="checkbox"]):not([type="radio"]):focus,
.agv-hform select:focus,
.agv-hform textarea:focus,
.agv-appcard__advance select:focus,
.agv-appcard__notes textarea:focus {
	border-color: var(--agv-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agv-brand) 22%, transparent);
	outline: none;
}

/* Keyboard focus still gets the platform ring from premium.css; this only
   keeps the two from stacking into a double outline. */
.agv-form__input:focus-visible,
.agv-hform input:focus-visible,
.agv-hform select:focus-visible,
.agv-hform textarea:focus-visible { outline-offset: 1px; }

/* Invalid only once the user has actually got it wrong — :user-invalid, not
   :invalid, so a required field is not red before it is touched. */
.agv-form__input:user-invalid,
.agv-hform input:user-invalid,
.agv-hform select:user-invalid,
.agv-hform textarea:user-invalid {
	border-color: var(--agv-bad);
	background: var(--agv-bad-tint);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agv-bad) 16%, transparent);
}

.agv-form__input[disabled],
.agv-hform input[disabled],
.agv-hform select[disabled] {
	background: var(--agv-surface-3);
	color: var(--agv-ink-4);
	cursor: not-allowed;
}

textarea.agv-form__input,
.agv-hform textarea,
.agv-appcard__notes textarea { min-height: 7rem; resize: vertical; }

/* --- Checkbox and radio rows ----------------------------------------
   The control sits in a fixed column so the label wraps under itself and
   never under the box.                                                 */

.agv-form__row--check {
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: .35rem var(--agv-s3);
	padding: var(--agv-s3);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line-2);
	border-radius: var(--agv-r-sm);
}
.agv-form__row--check > input[type="checkbox"],
.agv-form__row--check > input[type="radio"] { grid-column: 1; margin-top: 2px; }
.agv-form__row--check > .agv-form__label { grid-column: 2; }
.agv-form__row--check > .agv-form__help { grid-column: 2; }

.agv-form__row--choice {
	display: grid;
	gap: var(--agv-s2);
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line-2);
	border-radius: var(--agv-r-sm);
}
.agv-form__row--choice > legend {
	padding: 0;
	margin-bottom: .25rem;
	font-size: var(--agv-t-sm);
	font-weight: 660;
}

.agv-form__choice {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: .3rem var(--agv-s3);
	padding: var(--agv-s3);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-sm);
	transition: border-color var(--agv-fast) var(--agv-ease), background var(--agv-fast) var(--agv-ease);
}
.agv-form__choice > input { grid-column: 1; margin-top: 2px; }
.agv-form__choice > .agv-form__label { grid-column: 2; }
.agv-form__choice > .agv-form__help { grid-column: 2; }
.agv-form__choice:hover { border-color: var(--agv-ink-4); }
.agv-form__choice:has(input:checked) {
	border-color: var(--agv-brand);
	background: var(--agv-brand-tint);
}
.agv-form__choice:has(input:focus-visible) {
	outline: 3px solid var(--agv-brand);
	outline-offset: 2px;
}

/* --- The controls themselves ---------------------------------------- */

.agv-app input[type="checkbox"],
.agv-app input[type="radio"] {
	width: 20px; height: 20px;
	flex: none;
	accent-color: var(--agv-brand);
	cursor: pointer;
}

.agv-form__actions {
	display: flex;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--agv-s1);
}

.agv-form--inline {
	display: flex;
	align-items: flex-end;
	gap: var(--agv-s4);
	flex-wrap: wrap;
}
.agv-form--inline .agv-form__row { flex: 1 1 18rem; }
.agv-form--inline .agv-form__actions { margin: 0; }

/* --- Required marker ------------------------------------------------- */

.agv-req {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--agv-bad);
	white-space: nowrap;
}

/* ==========================================================================
   10. Auth card
   ========================================================================== */

.agv-authcard {
	display: grid;
	gap: var(--agv-s5);
	padding: var(--agv-s6) var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-lg);
	box-shadow: var(--agv-sh-2);
}
.agv-authcard .agv-btn--lg { width: 100%; justify-content: center; }

.agv-authcard__alt {
	margin: 0;
	padding-top: var(--agv-s4);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-3);
	text-align: center;
}

.agv-authcard__note {
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border-left: 3px solid var(--agv-info);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}
.agv-authcard__note p {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: var(--agv-ink-3);
}
.agv-authcard__note p + p { margin-top: var(--agv-s3); }

.agv-authcard__notetitle {
	margin: 0 0 var(--agv-s2);
	font-size: var(--agv-t-sm);
	font-weight: 680;
	line-height: 1.35;
	color: var(--agv-ink);
}

.agv-authcard__actions {
	display: flex;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	margin: var(--agv-s4) 0 0;
}
.agv-authcard__actions .agv-btn { flex: 1 1 auto; justify-content: center; }

/* ==========================================================================
   11. The holding form
   A long form, so it is broken into real fieldsets with real legends rather
   than a run of headings, and each group is a panel the eye can rest between.
   ========================================================================== */

.agv-hform {
	display: grid;
	gap: var(--agv-s5);
	margin: 0;
}

.agv-hform__intro {
	font-size: var(--agv-t-sm);
	line-height: 1.7;
	color: var(--agv-ink-3);
}
.agv-hform__intro p { margin-bottom: var(--agv-s3); }

.agv-hform__group {
	display: grid;
	gap: var(--agv-s4);
	margin: 0;
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

/* A legend styled as a real group title: browsers give it no weight of its
   own, and a fieldset whose legend looks like body text is not a group. */
.agv-hform__group > legend {
	padding: 0 var(--agv-s2);
	margin-left: calc(var(--agv-s2) * -1);
	font-family: var(--agv-font);
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.2;
	letter-spacing: -.012em;
	color: var(--agv-ink);
}

/* The enterprises block is a div, not a fieldset — it holds fieldsets. */
.agv-hform__group--plain { gap: var(--agv-s4); }

.agv-hform__heading {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.2;
}

.agv-hform__sub {
	display: grid;
	gap: var(--agv-s3);
	margin: 0;
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line-2);
	border-radius: var(--agv-r-sm);
}
.agv-hform__sub > legend {
	padding: 0 var(--agv-s2);
	margin-left: calc(var(--agv-s2) * -1);
	font-size: var(--agv-t-sm);
	font-weight: 680;
	letter-spacing: .01em;
	color: var(--agv-ink-2);
}

.agv-hform__field {
	display: grid;
	gap: .35rem;
	min-width: 0;
}
.agv-hform__field > label {
	display: flex;
	align-items: baseline;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	font-size: var(--agv-t-sm);
	font-weight: 640;
	line-height: 1.35;
	color: var(--agv-ink);
}
/* Four assurance slots share one label, so consecutive inputs need a gap. */
.agv-hform__field > input + input { margin-top: .35rem; }

.agv-hform__help {
	margin: 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-4);
}
.agv-hform__help .agv-pill { margin-left: var(--agv-s1); vertical-align: middle; }

.agv-hform__scope {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}

.agv-hform__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--agv-s4);
	align-items: start;
}

.agv-hform__actions {
	display: flex;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	align-items: center;
	padding-top: var(--agv-s2);
}

/* --- Check grids ------------------------------------------------------
   Twenty-four enterprises as one column is unusable and as a plain wrap is
   unscannable, so each option is a hit target in a responsive grid.     */

.agv-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--agv-s2);
}

.agv-checkgrid__item {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s3);
	min-height: 44px;
	padding: .55rem var(--agv-s3);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-sm);
	transition: border-color var(--agv-fast) var(--agv-ease), background var(--agv-fast) var(--agv-ease);
}
.agv-checkgrid__item label {
	flex: 1;
	font-size: var(--agv-t-sm);
	line-height: 1.4;
	color: var(--agv-ink-2);
	cursor: pointer;
	padding-top: 1px;
}
.agv-checkgrid__item:hover { border-color: var(--agv-ink-4); }
.agv-checkgrid__item:has(input:checked) {
	background: var(--agv-brand-tint);
	border-color: var(--agv-brand);
}
.agv-checkgrid__item:has(input:checked) label { color: var(--agv-brand-deep); font-weight: 600; }
.agv-checkgrid__item:has(input:focus-visible) {
	outline: 3px solid var(--agv-brand);
	outline-offset: 2px;
}

/* Radio grids are a single choice: narrower cells, since tenure labels are
   short and a wide cell makes the set look like checkboxes. */
.agv-checkgrid--radio { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* A confirm-before-destroying checkbox sitting on its own inside a form. */
.agv-listrow__actions .agv-checkgrid__item,
.agv-appcard__withdraw .agv-checkgrid__item {
	background: var(--agv-surface-2);
	margin-bottom: var(--agv-s2);
}

/* ==========================================================================
   12. Tiles
   Cards, because each is a self-contained figure and several are links. The
   dashboard uses the __figure form, the overview the __value form; both live
   in the same grid.
   ========================================================================== */

.agv-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: var(--agv-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.agv-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	min-width: 0;
	padding: var(--agv-s4);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--agv-fast) var(--agv-ease), box-shadow var(--agv-fast) var(--agv-ease);
}
a.agv-tile:hover {
	border-color: var(--agv-brand);
	box-shadow: var(--agv-sh-2);
}
a.agv-tile:hover .agv-tile__value,
a.agv-tile:hover .agv-tile__figure { color: var(--agv-brand-deep); }

.agv-tile--wide { grid-column: span 2; }

.agv-tile__label {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: var(--agv-track-wide);
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--agv-ink-4);
}

.agv-tile__value,
.agv-tile__figure {
	margin: .15rem 0 0;
	font-size: var(--agv-t-xl);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--agv-track-tight);
	color: var(--agv-ink);
	font-variant-numeric: tabular-nums;
}
.agv-tile__figure .agv-num { font-family: inherit; }

/* A figure that is words rather than a number cannot carry display size. */
.agv-tile__figure--text {
	font-size: var(--agv-t-md);
	font-weight: 660;
	line-height: 1.25;
	letter-spacing: normal;
}

.agv-tile__unit {
	font-size: var(--agv-t-xs);
	line-height: 1.4;
	color: var(--agv-ink-4);
}

.agv-tile__detail,
.agv-tile__note {
	margin: 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-3);
}
.agv-tile__note { margin-top: .25rem; }

.agv-tile__absent {
	margin: .25rem 0 0;
	font-size: var(--agv-t-sm);
	line-height: 1.55;
	color: var(--agv-ink-4);
	font-style: italic;
}

/* A tile that exists to say what is deliberately missing should not look
   like a tile carrying a figure. */
.agv-tile--absent {
	background: var(--agv-surface-2);
	border-style: dashed;
}
.agv-tile--absent .agv-tile__note { font-size: var(--agv-t-sm); }

.agv-tile__breakdown {
	list-style: none;
	margin: var(--agv-s3) 0 0;
	padding: 0;
	display: grid;
	gap: .3rem;
	width: 100%;
}
.agv-tile__breakdown li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--agv-s3);
	margin: 0;
	padding: .25rem 0;
	border-bottom: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-sm);
}
.agv-tile__breakdown li:last-child { border-bottom: 0; }
.agv-tile__breakdown .agv-num { font-weight: 700; color: var(--agv-ink); }

.agv-tile__spark {
	width: 100%;
	margin-top: var(--agv-s3);
	color: var(--agv-brand);
}
.agv-tile__spark .agv-tile__note { margin-top: .35rem; }

.agv-tile__next {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s2);
	margin: var(--agv-s3) 0 0;
	padding: var(--agv-s2) var(--agv-s3);
	background: var(--agv-surface-2);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm);
	line-height: 1.5;
	color: var(--agv-ink-2);
}
.agv-tile__next .agv-icon {
	width: 15px; height: 15px;
	margin-top: 3px;
	flex: none;
	color: var(--agv-brand);
}

.agv-tile .agv-btn { margin-top: var(--agv-s3); }

/* ==========================================================================
   13. Next up
   One panel, one action. It is the only thing on the overview that is
   allowed to shout, and it shouts by being painted rather than by being big.
   ========================================================================== */

.agv-nextup {
	padding: var(--agv-s5);
	background: var(--agv-brand-tint);
	border: 1px solid color-mix(in srgb, var(--agv-brand) 28%, transparent);
	border-radius: var(--agv-r);
}
.agv-nextup .agv-eyebrow { color: var(--agv-brand); }

.agv-nextup__title {
	margin: 0 0 var(--agv-s2);
	font-size: var(--agv-t-md);
	font-weight: 700;
	line-height: 1.25;
	color: var(--agv-brand-deep);
}

.agv-nextup__why {
	margin: 0 0 var(--agv-s4);
	max-width: 62ch;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-2);
}

/* ==========================================================================
   14. What is due next
   Rows, not cards. An obligation is a line in a list; making each one a card
   would turn five dates into a wall.
   ========================================================================== */

.agv-duelist {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-duelist__title,
.agv-matchlist__title,
.agv-switcher__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-duelist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.agv-duelist__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--agv-s2) var(--agv-s4);
	margin: 0;
	padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-duelist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.agv-duelist__item:first-child { padding-top: 0; }

.agv-duelist__main { min-width: 0; }

.agv-duelist__label {
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 640;
	line-height: 1.4;
	color: var(--agv-ink);
}

.agv-duelist__detail {
	margin: .2rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-3);
}

.agv-duelist__body {
	margin: .2rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.5;
	color: var(--agv-ink-4);
}

.agv-duelist__when {
	display: grid;
	justify-items: end;
	gap: .25rem;
	text-align: right;
}

.agv-duelist__date {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--agv-ink-2);
	white-space: nowrap;
}

.agv-duelist__form { grid-column: 1 / -1; margin: 0; }

.agv-duelist__empty {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

.agv-duelist__note {
	margin: 0;
	padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-4);
}

/* ==========================================================================
   15. Ranked schemes (overview)
   ========================================================================== */

.agv-matchlist {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-matchlist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.agv-matchlist__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--agv-s2) var(--agv-s4);
	margin: 0;
	padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-matchlist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.agv-matchlist__item:first-child { padding-top: 0; }

.agv-matchlist__main { min-width: 0; }

.agv-matchlist__name {
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 660;
	line-height: 1.35;
}
.agv-matchlist__name a { text-decoration: none; }
.agv-matchlist__name a:hover { text-decoration: underline; }

.agv-matchlist__objective {
	margin: .2rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-3);
}

.agv-matchlist__verdict {
	display: grid;
	justify-items: end;
	gap: .25rem;
	text-align: right;
}

.agv-matchlist__window {
	margin: 0;
	font-size: var(--agv-t-xs);
	line-height: 1.45;
	color: var(--agv-ink-4);
	max-width: 22ch;
}

.agv-matchlist__empty,
.agv-matchlist__note {
	margin: 0;
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}
.agv-matchlist__note {
	padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
}
.agv-matchlist__empty { font-size: var(--agv-t-sm); }

/* ==========================================================================
   16. Holding switcher
   ========================================================================== */

.agv-switcher {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

/* ==========================================================================
   17. Record completeness
   The panel beside the holding form, and the bar reused inside a tile.
   ========================================================================== */

.agv-complete {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-complete__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
}

.agv-complete__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-complete__count {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}
.agv-complete__count .agv-num { font-weight: 700; color: var(--agv-ink); }

.agv-complete__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.agv-complete__step {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: var(--agv-s3);
	margin: 0;
	padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-complete__step:last-child { border-bottom: 0; padding-bottom: 0; }
.agv-complete__step:first-child { padding-top: 0; }

.agv-complete__mark {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--agv-surface-3);
	box-shadow: inset 0 0 0 1px var(--agv-line);
	color: var(--agv-mute);
}
.agv-complete__mark .agv-icon { width: 11px; height: 11px; }
.agv-complete__step.is-done .agv-complete__mark {
	background: var(--agv-good);
	box-shadow: none;
	color: var(--agv-mod-on);
}

.agv-complete__body { min-width: 0; }

.agv-complete__label {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 620;
	line-height: 1.4;
}
.agv-complete__step.is-done .agv-complete__label { color: var(--agv-ink-4); font-weight: 560; }

.agv-complete__unlock {
	margin: .2rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-4);
}

/* ==========================================================================
   18. Scheme matches
   The verdict has to be readable before a word is read, so each card carries
   a coloured left edge as well as its pill, and the group heading repeats the
   same colour. --verdict is set once per modifier and everything reads it.
   ========================================================================== */

.agv-matchgroup {
	--verdict: var(--agv-mute);
	--verdict-tint: var(--agv-surface-3);

	display: grid;
	gap: var(--agv-s4);
}

.agv-matchgroup--strong      { --verdict: var(--agv-good); --verdict-tint: var(--agv-good-tint); }
.agv-matchgroup--possible    { --verdict: var(--agv-info); --verdict-tint: var(--agv-info-tint); }
.agv-matchgroup--conditional { --verdict: var(--agv-warn); --verdict-tint: var(--agv-warn-tint); }
.agv-matchgroup--weak        { --verdict: var(--agv-mute); --verdict-tint: var(--agv-surface-3); }
.agv-matchgroup--unavailable { --verdict: var(--agv-mute); --verdict-tint: var(--agv-surface-3); }

.agv-matchgroup__head {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	padding-bottom: var(--agv-s2);
	border-bottom: 2px solid var(--verdict);
}

.agv-matchgroup__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-matchgroup__count {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 .45rem;
	background: var(--verdict-tint);
	color: color-mix(in srgb, var(--verdict) 72%, var(--agv-ink));
	border-radius: var(--agv-r-pill);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.agv-matchgroup__list {
	display: grid;
	gap: var(--agv-s4);
}

.agv-matchgroup__note,
.agv-matchgroup__caveat {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

/* The weak group is a <details>: closed by default, and its summary is the
   only control on the screen that toggles rather than navigates. */
.agv-matchgroup--weak {
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}
.agv-matchgroup--weak > summary {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	min-height: 44px;
	padding: var(--agv-s2) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--agv-t-md);
	font-weight: 660;
	color: var(--agv-ink-2);
}
.agv-matchgroup--weak > summary::-webkit-details-marker { display: none; }
.agv-matchgroup--weak > summary::after {
	content: "";
	width: 9px; height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--agv-ink-4);
	border-bottom: 2px solid var(--agv-ink-4);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--agv-fast) var(--agv-ease);
}
.agv-matchgroup--weak[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.agv-matchgroup--weak > summary:hover { color: var(--agv-ink); }
.agv-matchgroup--weak[open] > summary { border-bottom: 1px solid var(--agv-line); margin-bottom: var(--agv-s3); }

.agv-matchgroup__foot { margin-top: var(--agv-s2); }

/* --- One match ------------------------------------------------------- */

.agv-match {
	--verdict: var(--agv-mute);
	--verdict-tint: var(--agv-surface-3);

	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	padding-left: calc(var(--agv-s5) - 4px);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-left: 4px solid var(--verdict);
	border-radius: 0 var(--agv-r) var(--agv-r) 0;
	transition: box-shadow var(--agv-fast) var(--agv-ease);
}
.agv-match:hover { box-shadow: var(--agv-sh-2); }

.agv-match--strong      { --verdict: var(--agv-good); --verdict-tint: var(--agv-good-tint); }
.agv-match--possible    { --verdict: var(--agv-info); --verdict-tint: var(--agv-info-tint); }
.agv-match--conditional { --verdict: var(--agv-warn); --verdict-tint: var(--agv-warn-tint); }
.agv-match--weak        { --verdict: var(--agv-line); --verdict-tint: var(--agv-surface-3); }
.agv-match--unavailable { --verdict: var(--agv-line); --verdict-tint: var(--agv-surface-3); }

/* A scheme that is closed or not open to this holding recedes rather than
   disappears — it is still information. */
.agv-match--unavailable { background: var(--agv-surface-2); }
.agv-match--unavailable .agv-match__title { color: var(--agv-ink-3); }

.agv-match__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
}

.agv-match__title {
	margin: 0;
	flex: 1 1 20ch;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}
.agv-match__title a { text-decoration: none; color: inherit; }
.agv-match__title a:hover { color: var(--agv-brand); text-decoration: underline; }

.agv-match__body {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .02em;
	color: var(--agv-ink-4);
}

.agv-match__objective {
	margin: 0;
	max-width: 68ch;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-2);
}

.agv-match__window {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 600;
	color: var(--agv-ink-2);
}
.agv-match__window .agv-icon {
	width: 15px; height: 15px;
	flex: none;
	color: var(--agv-ink-4);
}

/* Why it matched, and what blocks it. Two lists that must never be confused
   with one another, so one is green-ticked and one is amber-flagged. */
.agv-match__why,
.agv-match__block {
	padding: var(--agv-s3) var(--agv-s4);
	border-radius: var(--agv-r-sm);
}
.agv-match__why   { background: var(--agv-good-tint); }
.agv-match__block { background: var(--agv-warn-tint); }

.agv-match__why h4,
.agv-match__block h4 {
	margin: 0 0 var(--agv-s2);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: var(--agv-track-wide);
	text-transform: uppercase;
}
.agv-match__why h4   { color: color-mix(in srgb, var(--agv-good) 76%, var(--agv-ink)); }
.agv-match__block h4 { color: color-mix(in srgb, var(--agv-warn) 68%, var(--agv-ink)); }

.agv-match__why ul,
.agv-match__block ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .35rem;
}
.agv-match__why li,
.agv-match__block li {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s2);
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.5;
}
.agv-match__why li { color: color-mix(in srgb, var(--agv-good) 58%, var(--agv-ink)); }
.agv-match__block li { color: color-mix(in srgb, var(--agv-warn) 52%, var(--agv-ink)); }
.agv-match__why .agv-icon,
.agv-match__block .agv-icon {
	width: 15px; height: 15px;
	margin-top: 3px;
	flex: none;
}
.agv-match__why .agv-icon   { color: var(--agv-good); }
.agv-match__block .agv-icon { color: var(--agv-warn); }

.agv-match__facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .3rem var(--agv-s4);
	margin: 0;
	padding: var(--agv-s3) 0 0;
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-sm);
}
.agv-match__facts dt {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
	padding-top: .15rem;
}
.agv-match__facts dd { margin: 0; line-height: 1.55; color: var(--agv-ink-2); }

.agv-match__actions {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	padding-top: var(--agv-s2);
}

.agv-match__start { margin: 0; }

/* ==========================================================================
   19. Calendar
   Grouped by month; overdue lifted out and painted. Each entry is a row with
   a date chip, not a card — a year of obligations is a list.
   ========================================================================== */

.agv-cal2 {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-cal2__head {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	padding-bottom: var(--agv-s2);
	border-bottom: 1px solid var(--agv-line);
}

.agv-cal2__title {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}
.agv-cal2__title .agv-icon { width: 18px; height: 18px; flex: none; }

.agv-cal2__count {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	margin-left: auto;
	padding: 0 .45rem;
	background: var(--agv-surface-3);
	border-radius: var(--agv-r-pill);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink-3);
}

.agv-cal2__note {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

/* Overdue is the only part of a calendar that costs money today. */
.agv-cal2--overdue {
	background: var(--agv-bad-tint);
	border-color: color-mix(in srgb, var(--agv-bad) 34%, transparent);
	box-shadow: inset 3px 0 0 var(--agv-bad);
}
.agv-cal2--overdue .agv-cal2__head { border-bottom-color: color-mix(in srgb, var(--agv-bad) 26%, transparent); }
.agv-cal2--overdue .agv-cal2__title { color: color-mix(in srgb, var(--agv-bad) 76%, var(--agv-ink)); }
.agv-cal2--overdue .agv-cal2__title .agv-icon { color: var(--agv-bad); }
.agv-cal2--overdue .agv-cal2__count { background: var(--agv-surface); color: var(--agv-bad); }
.agv-cal2--overdue .agv-cal2__note { color: color-mix(in srgb, var(--agv-bad) 52%, var(--agv-ink-2)); }

.agv-cal2__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.agv-cal2__item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--agv-s3) var(--agv-s4);
	margin: 0;
	padding: var(--agv-s4) 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-cal2__item:last-child { border-bottom: 0; padding-bottom: 0; }
.agv-cal2__item:first-child { padding-top: var(--agv-s2); }

.agv-cal2__chip {
	display: grid;
	place-items: center;
	align-content: center;
	width: 52px;
	padding: .35rem 0;
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-sm);
	line-height: 1;
}

.agv-cal2__day {
	font-size: var(--agv-t-lg);
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink);
}

.agv-cal2__mon {
	margin-top: .15rem;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}

.agv-cal2__body { min-width: 0; }

.agv-cal2__label {
	margin: 0;
	font-family: var(--agv-font);
	font-size: var(--agv-t-base);
	font-weight: 640;
	line-height: 1.35;
}
.agv-cal2__label a { text-decoration: none; color: inherit; }
.agv-cal2__label a:hover { color: var(--agv-brand); text-decoration: underline; }

.agv-cal2__meta {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	margin: .35rem 0 0;
}

.agv-cal2__date {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--agv-ink-4);
}

.agv-cal2__detail {
	margin: .35rem 0 0;
	max-width: 70ch;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-3);
}

.agv-cal2__window,
.agv-cal2__who,
.agv-cal2__evidence {
	margin: .25rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.55;
	color: var(--agv-ink-4);
}

.agv-cal2__term {
	display: inline-block;
	margin-right: .35rem;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--agv-mute);
}

.agv-cal2__toggle { margin: 0; }

/* Overdue rows repeat the signal at row level, because a long overdue list
   scrolls the section heading off the screen. */
.agv-cal2__item--overdue .agv-cal2__chip {
	background: var(--agv-surface);
	border-color: color-mix(in srgb, var(--agv-bad) 40%, transparent);
	color: var(--agv-bad);
}
.agv-cal2__item--overdue .agv-cal2__day { color: var(--agv-bad); }
.agv-cal2__item--overdue .agv-cal2__mon { color: color-mix(in srgb, var(--agv-bad) 70%, var(--agv-ink-3)); }

/* Done recedes: dimmed, struck through on the label only, and still fully
   readable — an inspector may need to read exactly what was ticked. */
.agv-cal2__item.is-done { opacity: .62; }
.agv-cal2__item.is-done .agv-cal2__label {
	text-decoration: line-through;
	text-decoration-color: var(--agv-mute);
	text-decoration-thickness: 1px;
	color: var(--agv-ink-3);
}
.agv-cal2__item.is-done .agv-cal2__chip {
	background: var(--agv-surface-3);
	border-color: transparent;
}
.agv-cal2__item.is-done:hover,
.agv-cal2__item.is-done:focus-within { opacity: 1; }

/* --- Calendar tools --------------------------------------------------- */

.agv-cal2__tools {
	display: grid;
	gap: var(--agv-s2);
	justify-items: start;
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-cal2__toolnote {
	margin: 0;
	max-width: 72ch;
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

.agv-cal2__foot { margin-top: var(--agv-s2); }

/* ==========================================================================
   20. Applications
   A card, because an application genuinely is a self-contained object with a
   track, a checklist and two forms. The stage track is the part that has to
   read instantly: done, current and waiting differ in fill, not only hue.
   ========================================================================== */

.agv-appcard {
	display: grid;
	gap: var(--agv-s4);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
	box-shadow: var(--agv-sh-1);
	scroll-margin-top: var(--agv-s5);
}

.agv-appcard__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	padding-bottom: var(--agv-s3);
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-appcard__head > div { min-width: 0; flex: 1 1 22ch; }

.agv-appcard__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 700;
	line-height: 1.25;
}
.agv-appcard__title a { text-decoration: none; color: inherit; }
.agv-appcard__title a:hover { color: var(--agv-brand); text-decoration: underline; }

.agv-appcard__meta {
	display: flex;
	gap: var(--agv-s2) var(--agv-s4);
	flex-wrap: wrap;
	margin: .3rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.5;
	color: var(--agv-ink-4);
}

.agv-appcard__ref { font-family: var(--agv-mono); letter-spacing: .02em; }
.agv-appcard__ref code {
	padding: .1rem .3rem;
	background: var(--agv-surface-3);
	border-radius: var(--agv-r-xs);
	color: var(--agv-ink-2);
	font-weight: 600;
}

/* --- Progress -------------------------------------------------------- */

.agv-appcard__progress {
	display: grid;
	gap: .35rem;
}

.agv-appcard__pct {
	margin: 0;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}
.agv-appcard__pct .agv-num {
	font-size: var(--agv-t-sm);
	font-weight: 700;
	color: var(--agv-ink);
}

/* --- The stage track -------------------------------------------------
   Equal-width steps so the connector, drawn as a pseudo-element between
   adjacent marks, lands on the marks rather than near them. It lives inside
   .agv-scroll, which surfaces.css already makes scrollable on a small
   screen, so the track keeps its full width and never wraps.           */

.agv-appcard__track {
	list-style: none;
	margin: 0;
	padding: var(--agv-s2) 0;
	display: flex;
	min-width: 520px;
}

.agv-appcard__stage {
	position: relative;
	flex: 1 0 0;
	display: grid;
	justify-items: center;
	gap: .3rem;
	margin: 0;
	padding: 0 var(--agv-s2);
	text-align: center;
}

/* The connector: a rule from the previous mark to this one, behind both. */
.agv-appcard__stage + .agv-appcard__stage::before {
	content: "";
	position: absolute;
	top: 13px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--agv-line);
	z-index: 0;
}
.agv-appcard__stage.is-done + .agv-appcard__stage::before,
.agv-appcard__stage.is-current::before { background: var(--agv-good); }

.agv-appcard__mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--agv-surface);
	box-shadow: inset 0 0 0 2px var(--agv-line);
	color: var(--agv-mute);
}
.agv-appcard__mark .agv-icon { width: 13px; height: 13px; }

/* Done: solid fill, white tick. Current: solid info fill with a halo, so it
   is the only mark with a ring. Waiting: hollow, hairline, muted dot. */
.agv-appcard__stage.is-done .agv-appcard__mark {
	background: var(--agv-good);
	box-shadow: none;
	color: var(--agv-mod-on);
}
.agv-appcard__stage.is-current .agv-appcard__mark {
	background: var(--agv-info);
	box-shadow: 0 0 0 4px var(--agv-info-tint);
	color: var(--agv-mod-on);
}
.agv-appcard__stage.is-waiting .agv-appcard__mark {
	background: var(--agv-surface);
	box-shadow: inset 0 0 0 2px var(--agv-line);
	color: var(--agv-mute);
}

.agv-appcard__stagename {
	font-size: var(--agv-t-xs);
	font-weight: 620;
	line-height: 1.3;
	color: var(--agv-ink-3);
	max-width: 12ch;
}
.agv-appcard__stage.is-current .agv-appcard__stagename { color: var(--agv-ink); font-weight: 700; }
.agv-appcard__stage.is-waiting .agv-appcard__stagename { color: var(--agv-ink-4); font-weight: 560; }

/* --- Where it stands -------------------------------------------------- */

.agv-appcard__now {
	display: grid;
	gap: var(--agv-s2);
	padding: var(--agv-s4);
	background: var(--agv-info-tint);
	border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: color-mix(in srgb, var(--agv-info) 52%, var(--agv-ink));
}
.agv-appcard__now p { margin: 0; }

.agv-appcard__term {
	display: block;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: var(--agv-track-wide);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--agv-info) 78%, var(--agv-ink));
}

/* --- Advancing the stage ---------------------------------------------- */

.agv-appcard__advance {
	display: grid;
	grid-template-columns: auto minmax(9rem, 16rem) auto;
	align-items: center;
	gap: var(--agv-s2) var(--agv-s3);
	margin: 0;
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line-2);
	border-radius: var(--agv-r-sm);
}
.agv-appcard__advance > label {
	font-size: var(--agv-t-sm);
	font-weight: 640;
	white-space: nowrap;
}
.agv-appcard__advance > .agv-appcard__help { grid-column: 1 / -1; }

.agv-appcard__help {
	margin: 0;
	max-width: 74ch;
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

/* --- Checklist -------------------------------------------------------- */

.agv-appcard__checklist {
	display: grid;
	gap: var(--agv-s3);
	padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
}
.agv-appcard__checklist h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 680;
	line-height: 1.35;
}

.agv-appcard__count {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
	white-space: nowrap;
}

.agv-appcard__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--agv-s1);
}
.agv-appcard__checks > li { margin: 0; }
.agv-appcard__checks form { margin: 0; }

/* --- One check ------------------------------------------------------- */

.agv-checkitem__toggle {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s3);
	width: 100%;
	min-height: 44px;
	padding: .55rem var(--agv-s3);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--agv-r-sm);
	text-align: left;
	transition: background var(--agv-fast) var(--agv-ease), border-color var(--agv-fast) var(--agv-ease);
}
.agv-checkitem__toggle:hover {
	background: var(--agv-surface-2);
	border-color: var(--agv-line);
}

.agv-checkitem__box {
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	margin-top: 1px;
	flex: none;
	background: var(--agv-surface);
	border-radius: var(--agv-r-xs);
	box-shadow: inset 0 0 0 2px var(--agv-line);
	color: var(--agv-mod-on);
	transition: background var(--agv-fast) var(--agv-ease), box-shadow var(--agv-fast) var(--agv-ease);
}
.agv-checkitem__box .agv-icon { width: 13px; height: 13px; }

.agv-checkitem__text {
	font-size: var(--agv-t-sm);
	line-height: 1.55;
	color: var(--agv-ink-2);
}

.agv-checkitem__toggle[aria-pressed="true"] .agv-checkitem__box {
	background: var(--agv-good);
	box-shadow: none;
}
.agv-checkitem__toggle[aria-pressed="true"] .agv-checkitem__text { color: var(--agv-ink-4); }
.agv-checkitem.is-done .agv-checkitem__text { color: var(--agv-ink-4); }

/* --- Notes and withdraw ----------------------------------------------- */

.agv-appcard__notes {
	display: grid;
	gap: .4rem;
	margin: 0;
	justify-items: start;
}
.agv-appcard__notes > label {
	font-size: var(--agv-t-sm);
	font-weight: 640;
}
.agv-appcard__notes > textarea { justify-self: stretch; }

.agv-appcard__withdraw {
	display: grid;
	gap: var(--agv-s2);
	justify-items: start;
	margin: 0;
	padding: var(--agv-s4);
	background: var(--agv-bad-tint);
	border: 1px solid color-mix(in srgb, var(--agv-bad) 24%, transparent);
	border-radius: var(--agv-r-sm);
}
.agv-appcard__withdraw .agv-appcard__help { color: color-mix(in srgb, var(--agv-bad) 48%, var(--agv-ink-2)); }
.agv-appcard__withdraw .agv-checkgrid__item {
	background: var(--agv-surface);
	border-color: color-mix(in srgb, var(--agv-bad) 26%, transparent);
}

.agv-appcard__foot {
	display: flex;
	align-items: flex-start;
	gap: var(--agv-s2);
	padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}
.agv-appcard__foot p { margin: 0; }
.agv-appcard__foot .agv-icon {
	width: 15px; height: 15px;
	margin-top: 2px;
	flex: none;
	color: var(--agv-ink-4);
}

/* ==========================================================================
   21. Tabs
   sections.css owns the tab list and the underline. The app adds a count and
   an unread flag, which is all that is missing.
   ========================================================================== */

.agv-app .agv-tabs { display: grid; gap: var(--agv-s5); }
.agv-app .agv-tabs__list { margin-bottom: 0; }

/* Two classes because sections.css sets padding and colour on .agv-tabs__tab;
   the app needs a taller target than a content page's tab strip. */
.agv-app .agv-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--agv-s2);
	min-height: 48px;
	white-space: nowrap;
}
.agv-app .agv-tabs__tab[aria-selected="true"] {
	color: var(--agv-brand-deep);
	border-bottom-color: var(--agv-brand);
	font-weight: 680;
}

.agv-tabs__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 .4rem;
	background: var(--agv-surface-3);
	border-radius: var(--agv-r-pill);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink-3);
}

.agv-tabs__unread {
	padding: .1rem .45rem;
	background: var(--agv-warn);
	border-radius: var(--agv-r-xs);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--agv-mod-on);
}

.agv-tabs__panel { display: grid; gap: var(--agv-s5); }

/* ==========================================================================
   22. Listings
   A listing is a row with an action cluster, not a card. The vendor standing
   block above them is the one thing that changes what any of it does.
   ========================================================================== */

.agv-listrow__standing {
	display: grid;
	gap: var(--agv-s2);
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-listrow__vendor { margin: 0; }

.agv-listrow__standingnote {
	margin: 0;
	max-width: 76ch;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-3);
}

.agv-listrow__disclaimer {
	margin: 0;
	padding-top: var(--agv-s3);
	border-top: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-xs);
	line-height: 1.6;
	color: var(--agv-ink-4);
}

.agv-listrow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
	overflow: hidden;
}

.agv-listrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--agv-s3) var(--agv-s4);
	margin: 0;
	padding: var(--agv-s4);
	border-bottom: 1px solid var(--agv-line-2);
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-listrow:last-child { border-bottom: 0; }
.agv-listrow:hover { background: var(--agv-surface-2); }

.agv-listrow__body { min-width: 0; }

.agv-listrow__title {
	margin: 0;
	font-size: var(--agv-t-base);
	font-weight: 660;
	line-height: 1.35;
}
.agv-listrow__title a { text-decoration: none; color: inherit; }
.agv-listrow__title a:hover { color: var(--agv-brand); text-decoration: underline; }

.agv-listrow__meta {
	display: flex;
	align-items: center;
	gap: var(--agv-s2) var(--agv-s3);
	flex-wrap: wrap;
	margin: .35rem 0 0;
	font-size: var(--agv-t-sm);
}

.agv-listrow__cat {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}

.agv-listrow__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink);
}

.agv-listrow__enq,
.agv-listrow__where {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	margin: .3rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.5;
	color: var(--agv-ink-4);
}
.agv-listrow__enq .agv-icon,
.agv-listrow__where .agv-icon { width: 14px; height: 14px; flex: none; }

.agv-listrow__actions {
	display: grid;
	gap: var(--agv-s2);
	justify-items: stretch;
	min-width: 12rem;
}
.agv-listrow__actions form { margin: 0; display: grid; gap: var(--agv-s2); }
.agv-listrow__actions .agv-btn { justify-content: center; }

/* --- Enquiries -------------------------------------------------------- */

.agv-enquiry__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--agv-s3);
}

.agv-enquiry {
	display: grid;
	gap: var(--agv-s3);
	margin: 0;
	padding: var(--agv-s4);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-left: 3px solid var(--agv-line);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}

/* An unread enquiry is money waiting on a reply. */
.agv-enquiry.is-new {
	border-left-color: var(--agv-warn);
	background: var(--agv-surface);
	box-shadow: var(--agv-sh-1);
}

.agv-enquiry__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--agv-s3);
	flex-wrap: wrap;
}
.agv-enquiry__head > div { min-width: 0; }

.agv-enquiry__from {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	font-size: var(--agv-t-sm);
	line-height: 1.4;
}
.agv-enquiry__from strong { font-weight: 680; }

.agv-enquiry__email {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	letter-spacing: .01em;
	color: var(--agv-ink-4);
	overflow-wrap: anywhere;
}

.agv-enquiry__about {
	margin: .2rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.5;
	color: var(--agv-ink-4);
}

.agv-enquiry__flags {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.agv-enquiry__when {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	color: var(--agv-ink-4);
	white-space: nowrap;
}

.agv-enquiry__message {
	margin: 0;
	padding: var(--agv-s3) var(--agv-s4);
	background: var(--agv-surface-2);
	border-left: 2px solid var(--agv-line);
	border-radius: 0 var(--agv-r-sm) var(--agv-r-sm) 0;
}
.agv-enquiry__message p {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: var(--agv-ink-2);
}

.agv-enquiry__actions {
	display: flex;
	align-items: center;
	gap: var(--agv-s2);
	flex-wrap: wrap;
	padding-top: var(--agv-s2);
	border-top: 1px solid var(--agv-line-2);
}
.agv-enquiry__actions form { margin: 0; }

/* ==========================================================================
   23. Saved
   ========================================================================== */

.agv-savedrow__group {
	display: grid;
	gap: var(--agv-s3);
}
.agv-savedrow__group + .agv-savedrow__group { margin-top: var(--agv-s5); }

.agv-savedrow__head {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	flex-wrap: wrap;
	padding-bottom: var(--agv-s2);
	border-bottom: 1px solid var(--agv-line);
}

.agv-savedrow__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-savedrow__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	margin-left: auto;
	padding: 0 .4rem;
	background: var(--agv-surface-3);
	border-radius: var(--agv-r-pill);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--agv-ink-3);
}

.agv-savedrow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.agv-savedrow {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--agv-s2) var(--agv-s3);
	margin: 0;
	padding: var(--agv-s3) 0;
	border-bottom: 1px solid var(--agv-line-2);
}
.agv-savedrow:last-child { border-bottom: 0; }

.agv-savedrow__icon {
	display: grid;
	place-items: center;
	color: var(--agv-ink-4);
}
.agv-savedrow__icon .agv-icon { width: 16px; height: 16px; }

.agv-savedrow__body { min-width: 0; }

.agv-savedrow__label {
	margin: 0;
	font-size: var(--agv-t-sm);
	font-weight: 620;
	line-height: 1.4;
}
.agv-savedrow__label a { text-decoration: none; color: inherit; }
.agv-savedrow__label a:hover { color: var(--agv-brand); text-decoration: underline; }

.agv-savedrow__when {
	margin: .15rem 0 0;
	font-size: var(--agv-t-xs);
	line-height: 1.4;
	color: var(--agv-ink-4);
}

.agv-savedrow__actions { display: flex; gap: var(--agv-s2); }

.agv-savedrow__remove .agv-icon { width: 13px; height: 13px; }

/* ==========================================================================
   24. Settings
   Blocks in the order somebody needs them, with the destructive one last and
   unmistakably different.
   ========================================================================== */

.agv-settings {
	display: grid;
	gap: var(--agv-s5);
}

.agv-settings__block {
	display: grid;
	gap: var(--agv-s3);
	padding: var(--agv-s5);
	background: var(--agv-surface);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
}

.agv-settings__title {
	margin: 0;
	padding-bottom: var(--agv-s2);
	border-bottom: 1px solid var(--agv-line-2);
	font-size: var(--agv-t-md);
	font-weight: 680;
	line-height: 1.25;
}

.agv-settings__note {
	margin: 0;
	max-width: 76ch;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: var(--agv-ink-3);
}

.agv-settings__pairs {
	display: grid;
	grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
	gap: var(--agv-s2) var(--agv-s5);
	margin: 0;
	align-items: baseline;
}
.agv-settings__pairs dt {
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--agv-ink-4);
}
.agv-settings__pairs dd {
	margin: 0;
	font-size: var(--agv-t-sm);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.agv-settings__datalist {
	margin: 0;
	padding-left: 1.15rem;
	display: grid;
	gap: .35rem;
	max-width: 76ch;
	font-size: var(--agv-t-sm);
	line-height: 1.6;
	color: var(--agv-ink-3);
}
.agv-settings__datalist li { margin: 0; }
.agv-settings__datalist li::marker { color: var(--agv-mute); }

/* --- Plan tiers -------------------------------------------------------
   surfaces.css draws .agv-tierrow as a horizontal scroller of marketing
   cards. In settings it is a vertical list of plans the user already has one
   of, so the container is redeclared here — the item styling from
   surfaces.css is reused as-is.                                        */

.agv-settings__tiers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--agv-s3);
}

.agv-settings__tiers .agv-tierrow {
	display: grid;
	gap: var(--agv-s2);
	grid-auto-flow: row;
	grid-auto-columns: auto;
	margin: 0;
	padding: var(--agv-s4);
	background: var(--agv-surface-2);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r-sm);
	overflow: visible;
}

.agv-tierrow__head {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	flex-wrap: wrap;
}

/* The plan you are on, marked by fill and a left edge rather than by a pill
   alone — the pill is there, but it is not the only signal. */
.agv-settings__tiers .agv-tierrow--current {
	background: var(--agv-brand-tint);
	border-color: var(--agv-brand);
	box-shadow: inset 3px 0 0 var(--agv-brand);
}

/* --- The danger zone --------------------------------------------------
   Genuinely different: a red hairline, a tinted ground and its own heading
   colour, so nobody deletes a holding record while skimming.           */

.agv-danger {
	display: grid;
	gap: var(--agv-s3);
	margin-top: var(--agv-s2);
	padding: var(--agv-s5);
	background: var(--agv-bad-tint);
	border: 1px solid var(--agv-bad);
	border-radius: var(--agv-r);
}

.agv-danger__title {
	margin: 0;
	font-size: var(--agv-t-md);
	font-weight: 700;
	line-height: 1.25;
	color: color-mix(in srgb, var(--agv-bad) 84%, var(--agv-ink));
}

.agv-danger__body {
	margin: 0;
	max-width: 72ch;
	font-size: var(--agv-t-sm);
	line-height: 1.65;
	color: color-mix(in srgb, var(--agv-bad) 46%, var(--agv-ink));
}
.agv-danger__body strong { font-weight: 700; }

.agv-danger .agv-form__row--check {
	background: var(--agv-surface);
	border-color: color-mix(in srgb, var(--agv-bad) 30%, transparent);
}
.agv-danger .agv-form__help { color: color-mix(in srgb, var(--agv-bad) 40%, var(--agv-ink-3)); }
.agv-danger input[type="checkbox"] { accent-color: var(--agv-bad); }

/* components.css draws .agv-btn--outline for a painted ground. Inside the
   danger zone it is the destructive control and has to look it, so the two
   classes are used together to reach it without touching the base rule. */
.agv-danger .agv-btn--outline {
	background: var(--agv-bad);
	border-color: var(--agv-bad);
	color: var(--agv-mod-on);
	opacity: 1;
}
.agv-danger .agv-btn--outline:hover {
	background: color-mix(in srgb, var(--agv-bad) 82%, #000);
	border-color: color-mix(in srgb, var(--agv-bad) 82%, #000);
	color: var(--agv-mod-on);
}
.agv-danger .agv-btn--outline:focus-visible { outline-color: var(--agv-bad); }

/* ==========================================================================
   25. Shared vocabulary, positioned
   These are surfaces.css's and components.css's components. Nothing about
   them is restyled — this only gives them the spacing they need in a column
   they were not written for.
   ========================================================================== */

/* Used by the app screens exactly as their owning file draws them, and
   deliberately not restyled here:

   components.css   .agv-btn, .agv-btn--primary, .agv-btn--ghost,
                    .agv-btn--outline, .agv-btn--sm, .agv-btn--lg,
                    .agv-pill, .agv-card
   surfaces.css     .agv-btn--quiet, .agv-pill--state and every state
                    modifier, .agv-badge, .agv-scroll, .agv-table,
                    .agv-num, .agv-surface__note, .agv-delta, .agv-spark,
                    .agv-quart, .agv-callout, .agv-chip, .agv-filters,
                    .agv-ticks, and the plan-card internals
                    .agv-tierrow__name, .agv-tierrow__price,
                    .agv-tierrow__value, .agv-tierrow__period,
                    .agv-tierrow__indicative, .agv-tierrow__blurb,
                    .agv-tierrow__features, .agv-tierrow__limits,
                    .agv-tierrow__limitlabel
   sections.css     .agv-tabs__list, .agv-tabs__tab, .agv-tabs__panel
   base.css         .agv-wrap, .agv-eyebrow, .agv-prose, .screen-reader-text
   premium.css      the focus ring, button interaction weight, forced colours

   Only the container and the two app-only additions above them are set
   here; the parts listed are reached, if at all, through a two-class
   selector with the reason written beside it. */

.agv-app .agv-surface__note { margin-top: var(--agv-s2); }
.agv-app .agv-prose { max-width: 72ch; }
.agv-app .agv-eyebrow { margin-bottom: var(--agv-s2); color: var(--agv-brand); }
.agv-app .agv-num { font-variant-numeric: tabular-nums; }
.agv-app .agv-btn { min-height: 44px; }
.agv-app .agv-btn--sm { min-height: 40px; padding: 0 .85rem; font-size: var(--agv-t-xs); }

/* ==========================================================================
   26. Small screens
   The sidebar becomes a horizontal strip above the work, tiles step down
   2-up then 1-up, and every wide thing keeps its own scroller. Nothing is
   allowed to make the body scroll sideways.
   ========================================================================== */

@media (max-width: 900px) {
	.agv-app { padding-block: var(--agv-s5) var(--agv-s8); }

	.agv-app__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--agv-s5);
	}

	.agv-appnav {
		position: static;
		display: flex;
		align-items: center;
		gap: var(--agv-s3);
		flex-wrap: wrap;
		padding: 0 0 var(--agv-s3);
		border-right: 0;
		border-bottom: 1px solid var(--agv-line);
	}

	.agv-appnav__who {
		flex: 1 1 auto;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.agv-appnav__out {
		flex: none;
		order: 2;
		min-height: 40px;
		border-top: 0;
	}

	/* The nav itself: one scrolling strip, full bleed to the wrap padding so
	   the last item is visibly cut off rather than looking like the end. */
	.agv-appnav__list {
		order: 3;
		flex: 1 0 100%;
		display: flex;
		gap: var(--agv-s2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: var(--agv-s2);
		margin-inline: calc(var(--agv-gutter) * -1);
		padding-inline: var(--agv-gutter);
	}
	.agv-appnav__list li { flex: none; }

	.agv-appnav__link {
		white-space: nowrap;
		border: 1px solid var(--agv-line);
		background: var(--agv-surface);
	}
	.agv-appnav__link.is-current {
		background: var(--agv-brand-tint);
		border-color: var(--agv-brand);
		box-shadow: none;
	}

	.agv-tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
	.agv-tile--wide { grid-column: span 2; }

	.agv-hform__row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

	.agv-appcard__advance { grid-template-columns: minmax(0, 1fr); }
	.agv-appcard__advance > label { white-space: normal; }
}

@media (max-width: 640px) {
	.agv-apphead { gap: var(--agv-s3); }
	.agv-apphead__actions { width: 100%; }
	.agv-apphead__actions .agv-btn { flex: 1 1 auto; justify-content: center; }

	.agv-tiles { grid-template-columns: minmax(0, 1fr); }
	.agv-tile--wide { grid-column: auto; }

	.agv-authcard,
	.agv-wall { padding: var(--agv-s5) var(--agv-s4); }

	.agv-hform__group,
	.agv-settings__block,
	.agv-duelist,
	.agv-matchlist,
	.agv-complete,
	.agv-cal2,
	.agv-appcard,
	.agv-match,
	.agv-nextup,
	.agv-switcher,
	.agv-danger { padding: var(--agv-s4); }

	.agv-match { padding-left: calc(var(--agv-s4) - 4px); }

	.agv-hform__row { grid-template-columns: minmax(0, 1fr); }
	.agv-checkgrid,
	.agv-checkgrid--radio { grid-template-columns: minmax(0, 1fr); }

	.agv-form--inline { display: grid; }

	/* Two-column rows become stacked: a 40-character label and a pill do not
	   share a line at this width without one of them breaking. */
	.agv-duelist__item,
	.agv-matchlist__item,
	.agv-listrow {
		grid-template-columns: minmax(0, 1fr);
	}
	.agv-duelist__when,
	.agv-matchlist__verdict {
		justify-items: start;
		text-align: left;
	}
	.agv-matchlist__window { max-width: none; }

	.agv-listrow__actions { min-width: 0; }

	.agv-cal2__item { grid-template-columns: 44px minmax(0, 1fr); }
	.agv-cal2__chip { width: 44px; }
	.agv-cal2__toggle { grid-column: 1 / -1; }

	.agv-savedrow { grid-template-columns: 20px minmax(0, 1fr); }
	.agv-savedrow__actions { grid-column: 2; }

	.agv-settings__pairs { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
	.agv-settings__pairs dd { margin-bottom: var(--agv-s2); }

	.agv-enquiry__flags { justify-content: flex-start; }

	.agv-app .agv-btn { width: 100%; justify-content: center; }
	.agv-app .agv-btn--sm { width: auto; }
	.agv-app .agv-form__actions .agv-btn { width: 100%; }
}

/* ==========================================================================
   27. Motion and contrast
   base.css already zeroes durations under prefers-reduced-motion; what it
   cannot do is remove a transform that only exists here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.agv-setup__fill,
	.agv-complete__fill,
	.agv-appcard__fill { transition: none; }
	.agv-matchgroup--weak > summary::after { transition: none; }
}

/* Under a forced palette the tinted grounds vanish, so the states that were
   carried by fill have to be carried by a border instead. premium.css owns
   the general forced-colors block; these are the app-only cases. */
@media (forced-colors: active) {
	.agv-appcard__stage.is-current .agv-appcard__mark,
	.agv-appcard__stage.is-done .agv-appcard__mark { forced-color-adjust: none; }
	.agv-appnav__link.is-current { border: 2px solid; }
	.agv-danger { border-width: 3px; }
	.agv-cal2--overdue,
	.agv-cal2__item--overdue .agv-cal2__chip { border: 2px solid; }
	.agv-checkitem__toggle[aria-pressed="true"] .agv-checkitem__box { border: 2px solid; }
}

/* ==========================================================================
   The journey band
   Rendered at the foot of every content page and, as a slim strip, at the top
   for a signed-in user who has not finished setting up. This is what turns
   1,400 generated pages into one route through the product rather than 1,400
   dead ends, so it is styled to be noticed without shouting.
   ========================================================================== */

.agv-journey {
	padding-block: var(--agv-section-y);
	border-top: 1px solid var(--agv-line-2);
}

.agv-journey__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--agv-s7);
	align-items: start;
}

.agv-journey__title {
	margin: 0 0 var(--agv-s3);
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: var(--agv-lh-snug);
	text-wrap: balance;
}

.agv-journey__why {
	margin: 0 0 var(--agv-s5);
	max-width: 56ch;
	font-size: var(--agv-t-md);
	line-height: 1.55;
	color: var(--agv-ink-3);
}

.agv-journey__actions { display: flex; flex-wrap: wrap; gap: var(--agv-s3); }

.agv-journey__more {
	padding-left: var(--agv-s6);
	border-left: 1px solid var(--agv-line);
}

.agv-journey__morelabel {
	margin: 0 0 var(--agv-s3);
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: var(--agv-track-wide);
	text-transform: uppercase;
	color: var(--agv-ink-4);
}

.agv-journey__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.agv-journey__list li { margin: 0; }

.agv-journey__link {
	display: grid;
	gap: 2px;
	padding: var(--agv-s3);
	border-radius: var(--agv-r-sm);
	text-decoration: none;
	color: inherit;
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-journey__link:hover { background: var(--agv-surface); }

.agv-journey__linklabel { font-weight: 600; font-size: var(--agv-t-base); color: var(--agv-mod-base); }
.agv-journey__linkwhy   { font-size: var(--agv-t-sm); line-height: 1.45; color: var(--agv-ink-4); }

@media (max-width: 860px) {
	.agv-journey__inner { grid-template-columns: 1fr; gap: var(--agv-s5); }
	.agv-journey__more { padding-left: 0; padding-top: var(--agv-s5); border-left: 0; border-top: 1px solid var(--agv-line); }
}

/* --- The set-up strip ------------------------------------------------ */

.agv-strip {
	background: var(--agv-brand-tint);
	border-bottom: 1px solid var(--agv-line-2);
}

.agv-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	padding-block: var(--agv-s3);
}

.agv-strip__inner > .agv-icon { flex: none; width: 18px; height: 18px; color: var(--agv-brand); }
.agv-strip__text { margin: 0; flex: 1; min-width: 0; font-size: var(--agv-t-sm); line-height: 1.5; color: var(--agv-ink-2); }
.agv-strip .agv-btn { flex: none; }

@media (max-width: 640px) {
	.agv-strip__inner { flex-wrap: wrap; }
	.agv-strip__text { flex-basis: 100%; }
}

/* --- The account chip in the header ---------------------------------- */

.agv-accountchip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem .6rem .25rem .3rem;
	border-radius: var(--agv-r-pill);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: inherit;
	text-decoration: none;
	max-width: 220px;
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-accountchip:hover { background: rgba(255, 255, 255, .16); }

.agv-accountchip__text { display: grid; min-width: 0; line-height: 1.2; }
.agv-accountchip__name { font-size: var(--agv-t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agv-accountchip__sub  { font-size: var(--agv-t-xs); opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
	.agv-accountchip__text { display: none; }
	.agv-accountchip { padding: .25rem; }
}

/* Pending state while an obligation tick posts. */
.agv-cal2__item.is-pending { opacity: .55; }

/* The enterprise-picker running count. */
.agv-checkgrid__count {
	margin-left: .5rem;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 500;
	color: var(--agv-brand);
}

.agv-form__help--calc { color: var(--agv-ink-3); font-style: normal; }