/* ==========================================================================
   Agrivencia — the cockpit header
   Three stacked rows: controls, navigation, instruments. Dense by design,
   collapsible on request, and legible at 320px.
   ========================================================================== */

/* The header scrolls away with the page rather than pinning to the top.
   Three dense rows held permanently in view take roughly a fifth of a
   laptop viewport and never give it back, which costs more than
   always-visible navigation is worth. It sits at the top of the
   document, does its job, and gets out of the way. */
.agv-cockpit {
	position: relative;
	z-index: var(--agv-z-header);
	background: var(--agv-brand-dark);
	color: #e8efe4;
	box-shadow: var(--agv-sh-2);
	font-size: var(--agv-t-sm);
	container-type: inline-size;
}

.agv-cockpit__row { border-bottom: 1px solid rgba(255,255,255,.08); }
.agv-cockpit__row:last-of-type { border-bottom: 0; }

.agv-cockpit__inner {
	display: flex;
	align-items: center;
	gap: var(--agv-s3);
	max-width: 1680px;
	margin-inline: auto;
	padding: 0 var(--agv-gutter);
	min-height: 46px;
}

/* --- Logo ------------------------------------------------------------ */
.agv-logo {
	display: inline-flex; align-items: center; gap: .55rem;
	text-decoration: none; color: inherit; flex: none;
	padding-block: .4rem;
}
.agv-logo__mark {
	width: 22px; height: 22px; border-radius: 6px;
	background: linear-gradient(140deg, var(--agv-brand-glow), var(--agv-brand));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
	position: relative;
}
.agv-logo__mark::after {
	content: ""; position: absolute; inset: 6px 9px 5px;
	border-left: 2px solid var(--agv-brand-dark);
	border-radius: 1px;
}
.agv-logo__text {
	font-family: var(--agv-display);
	font-size: 1.0625rem; font-weight: 600;
	letter-spacing: -.02em; line-height: 1;
}
.agv-logo__tld { opacity: .45; font-weight: 400; }
.agv-logo--footer .agv-logo__text { font-size: 1.375rem; }

/* --- Control row ----------------------------------------------------- */
.agv-cockpit__controls {
	display: flex; align-items: center; gap: var(--agv-s2);
	margin-left: auto; flex-wrap: nowrap; overflow: visible;
}
.agv-cockpit__spacer { width: var(--agv-s3); }

.agv-chip {
	display: inline-flex; align-items: center; gap: .35rem;
	height: 30px; padding: 0 .55rem;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--agv-r-pill);
	color: inherit;
	font-size: var(--agv-t-xs); font-weight: 550;
	white-space: nowrap;
	transition: background var(--agv-fast) var(--agv-ease);
}
.agv-chip:hover { background: rgba(255,255,255,.14); }
.agv-chip .agv-icon { width: 14px; height: 14px; opacity: .7; }
.agv-chip__meta { opacity: .5; font-weight: 400; }
.agv-chip--select select {
	appearance: none; background: transparent; border: 0;
	color: inherit; font-size: inherit; font-weight: inherit;
	padding-right: .8rem; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 2px center, right 0 center;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}
.agv-chip--select select option { color: #14170f; background: #fff; }

.agv-icon-btn {
	position: relative;
	display: inline-grid; place-items: center;
	width: 32px; height: 32px;
	background: transparent; border: 0; border-radius: var(--agv-r-sm);
	color: inherit; opacity: .82;
	transition: background var(--agv-fast), opacity var(--agv-fast);
}
.agv-icon-btn:hover { background: rgba(255,255,255,.12); opacity: 1; }
.agv-icon-btn .agv-icon { width: 18px; height: 18px; }

.agv-badge {
	position: absolute; top: 1px; right: 0;
	min-width: 15px; height: 15px; padding: 0 3px;
	display: grid; place-items: center;
	background: var(--agv-brand-lite); color: #06180a;
	border-radius: var(--agv-r-pill);
	font-size: 9px; font-weight: 700; line-height: 1;
	font-family: var(--agv-mono);
}
.agv-badge--warn { background: var(--agv-corn); color: #3d2a02; }

/* Buttons sitting on the dark header need their own foreground, since the
   default ghost button is drawn for a light surface. */
.agv-cockpit .agv-btn--ghost {
	color: #e8efe4;
	border-color: rgba(255,255,255,.22);
	background: rgba(255,255,255,.06);
}
.agv-cockpit .agv-btn--ghost:hover {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.4);
	color: #fff;
}
.agv-cockpit .agv-btn--primary {
	background: var(--agv-brand-lite);
	color: #06180a;
}
.agv-cockpit .agv-btn--primary:hover { background: var(--agv-brand-glow); color: #06180a; }

.agv-avatar {
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(140deg, var(--agv-brand-lite), var(--agv-brand));
	color: #05170a; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* --- Navigation row -------------------------------------------------- */
.agv-cockpit__row--nav { background: rgba(255,255,255,.03); }

.agv-launcher {
	display: inline-flex; align-items: center; gap: .45rem;
	height: 34px; padding: 0 .7rem;
	background: var(--agv-brand); color: #fff;
	border: 0; border-radius: var(--agv-r-sm);
	font-size: var(--agv-t-sm); font-weight: 600;
	flex: none;
	transition: background var(--agv-fast);
}
.agv-launcher:hover { background: var(--agv-brand-lite); color: #06180a; }
.agv-launcher .agv-icon { width: 16px; height: 16px; }
.agv-launcher__count {
	font-family: var(--agv-mono); font-size: 10px;
	background: rgba(0,0,0,.24); padding: 1px 5px; border-radius: var(--agv-r-pill);
}

.agv-nav__list {
	display: flex; align-items: center; gap: 2px;
	list-style: none; margin: 0; padding: 0;
}
.agv-nav__item { margin: 0; }
.agv-nav__link {
	display: inline-flex; align-items: center; gap: .25rem;
	height: 34px; padding: 0 .7rem;
	background: transparent; border: 0; border-radius: var(--agv-r-sm);
	color: inherit; text-decoration: none;
	font-size: var(--agv-t-sm); font-weight: 550;
	white-space: nowrap;
	transition: background var(--agv-fast);
}
.agv-nav__link:hover, .agv-nav__link[aria-expanded="true"] { background: rgba(255,255,255,.12); color: inherit; }
.agv-nav__link .agv-icon { width: 14px; height: 14px; opacity: .55; transition: transform var(--agv-fast); }
.agv-nav__link[aria-expanded="true"] .agv-icon { transform: rotate(180deg); }

/* --- Search ---------------------------------------------------------- */
.agv-search {
	position: relative;
	display: flex; align-items: center; gap: .45rem;
	margin-left: auto;
	min-width: 220px; max-width: 420px; flex: 1 1 320px;
	height: 34px; padding: 0 .6rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--agv-r-sm);
	transition: border-color var(--agv-fast), background var(--agv-fast);
}
.agv-search:focus-within { background: rgba(255,255,255,.14); border-color: var(--agv-brand-lite); }
.agv-search .agv-icon { width: 15px; height: 15px; opacity: .55; }
.agv-search input {
	flex: 1; min-width: 0;
	background: transparent; border: 0; outline: 0;
	color: inherit; font-size: var(--agv-t-sm);
}
.agv-search input::placeholder { color: rgba(255,255,255,.4); }
.agv-search__kbd {
	font-family: var(--agv-mono); font-size: 10px;
	padding: 1px 5px; border-radius: 4px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
	opacity: .6;
}
.agv-search__results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	background: var(--agv-surface); color: var(--agv-ink);
	border-radius: var(--agv-r); box-shadow: var(--agv-sh-4);
	max-height: 60vh; overflow-y: auto; padding: var(--agv-s2);
	z-index: 10;
}
.agv-search__result {
	display: block; padding: .5rem .65rem; border-radius: var(--agv-r-sm);
	text-decoration: none; color: inherit;
}
.agv-search__result:hover, .agv-search__result.is-active { background: var(--agv-mod-tint); }
.agv-search__result strong { display: block; font-size: var(--agv-t-base); }
.agv-search__result span { font-size: var(--agv-t-xs); color: var(--agv-ink-4); }

.agv-search--page {
	background: var(--agv-surface); border-color: var(--agv-line);
	height: 48px; max-width: 640px; margin-block: var(--agv-s5);
}
.agv-search--page input { color: var(--agv-ink); font-size: var(--agv-t-base); }
.agv-search--page input::placeholder { color: var(--agv-mute); }
.agv-search--page .agv-icon { color: var(--agv-mod-base); opacity: 1; }

.agv-nav-toggle { display: none; }

/* --- Instrument rail ------------------------------------------------- */
.agv-cockpit__row--instruments {
	position: relative;
	background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
	overflow: hidden;
}
.agv-cockpit__rail {
	display: flex; align-items: stretch; gap: 0;
	overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.2) transparent;
	padding: .4rem var(--agv-gutter) .45rem;
	max-width: 1680px; margin-inline: auto;
}
.agv-cockpit__rail::-webkit-scrollbar { height: 5px; }
.agv-cockpit__rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.agv-instr-group {
	display: flex; flex-direction: column; gap: 2px;
	padding-inline: .75rem;
	border-left: 1px solid rgba(255,255,255,.08);
	flex: none;
}
.agv-instr-group:first-child { border-left: 0; padding-left: 0; }
.agv-instr-group__label {
	font-family: var(--agv-mono); font-size: 9px;
	letter-spacing: var(--agv-track-wide); text-transform: uppercase;
	color: rgba(255,255,255,.34);
}
.agv-instr-group__items { display: flex; gap: .1rem; }

.agv-instr {
	position: relative;
	display: flex; flex-direction: column; gap: 1px;
	padding: .18rem .5rem;
	border-radius: var(--agv-r-xs);
	min-width: 62px;
	transition: background var(--agv-fast);
	cursor: default;
}
.agv-instr:hover, .agv-instr:focus-visible { background: rgba(255,255,255,.1); }

.agv-instr__label {
	font-size: 9.5px; line-height: 1.2;
	color: rgba(255,255,255,.5);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	max-width: 108px;
}
.agv-instr__value {
	display: flex; align-items: baseline; gap: .2rem;
	font-family: var(--agv-mono); font-size: 13px; font-weight: 600;
	line-height: 1.15; color: #f2f6ee;
	white-space: nowrap;
}
.agv-instr__unit { font-size: 9px; font-weight: 400; opacity: .55; }

.agv-instr.is-good .agv-instr__value { color: var(--agv-brand-glow); }
.agv-instr.is-warn .agv-instr__value { color: var(--agv-corn); }
.agv-instr.is-bad  .agv-instr__value { color: #ff8a7a; }

.agv-instr__gauge {
	display: block; height: 3px; margin-top: 2px;
	background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden;
}
.agv-instr__gauge::after {
	content: ""; display: block; height: 100%; width: var(--fill, 0%);
	background: var(--agv-brand-glow); border-radius: 2px;
	transition: width var(--agv-slow) var(--agv-ease-out);
}
.agv-instr.is-warn .agv-instr__gauge::after { background: var(--agv-corn); }

.agv-instr__spark { display: block; color: var(--agv-brand-glow); opacity: .8; margin-top: 1px; }
.agv-instr__delta { font-family: var(--agv-mono); font-size: 9px; }
.agv-instr__delta.is-up { color: var(--agv-brand-glow); }
.agv-instr__delta.is-down { color: #ff9a8a; }

.agv-compass {
	width: 11px; height: 11px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.4);
	position: relative; display: inline-block;
}
.agv-compass::after {
	content: ""; position: absolute; top: 1px; left: 50%;
	width: 1.5px; height: 5px; background: var(--agv-brand-glow);
	transform-origin: 50% 4.5px; transform: translateX(-50%) rotate(var(--dir, 0deg));
	border-radius: 1px;
}

.agv-instr__help {
	position: absolute; top: calc(100% + 6px); left: 0;
	width: 240px; padding: .5rem .65rem;
	background: var(--agv-ink); color: #fff;
	border-radius: var(--agv-r-sm); box-shadow: var(--agv-sh-3);
	font-size: var(--agv-t-xs); line-height: 1.4;
	opacity: 0; visibility: hidden; z-index: 20;
	transition: opacity var(--agv-fast);
	pointer-events: none;
}
.agv-instr:hover .agv-instr__help,
.agv-instr:focus-visible .agv-instr__help { opacity: 1; visibility: visible; }

.agv-rail-toggle {
	position: absolute; right: var(--agv-gutter); top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 26px;
	display: grid; place-items: center;
	background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--agv-r-sm); color: inherit;
}
.agv-rail-toggle .agv-icon { width: 14px; height: 14px; transition: transform var(--agv-base); }
.agv-cockpit.is-rail-collapsed .agv-rail-toggle .agv-icon { transform: rotate(180deg); }
.agv-cockpit.is-rail-collapsed .agv-cockpit__rail { max-height: 34px; }
.agv-cockpit.is-rail-collapsed .agv-instr-group__label,
.agv-cockpit.is-rail-collapsed .agv-instr__label { display: none; }

.agv-cockpit__notice {
	display: flex; align-items: center; gap: .4rem; justify-content: center;
	margin: 0; padding: .25rem var(--agv-gutter);
	background: rgba(232,185,58,.14);
	color: #f4d78d;
	font-size: 10.5px;
	border-top: 1px solid rgba(232,185,58,.2);
}
.agv-cockpit__notice .agv-icon { width: 13px; height: 13px; }
.agv-cockpit__notice a { color: inherit; }
.agv-cockpit__notice.is-hidden { display: none; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1180px) {
	.agv-cockpit__controls .agv-chip--select:nth-of-type(3),
	.agv-icon-btn[data-action="compare"],
	.agv-icon-btn[data-action="watchlist"] { display: none; }
}

@media (max-width: 980px) {
	.agv-nav, .agv-launcher { display: none; }
	.agv-nav-toggle {
		display: inline-grid; place-items: center;
		width: 36px; height: 34px; margin-left: auto;
		background: rgba(255,255,255,.1); border: 0; border-radius: var(--agv-r-sm);
		color: inherit;
	}
	.agv-nav-toggle__bars, .agv-nav-toggle__bars::before, .agv-nav-toggle__bars::after {
		display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
		transition: transform var(--agv-base) var(--agv-ease);
	}
	.agv-nav-toggle__bars { position: relative; }
	.agv-nav-toggle__bars::before { content: ""; position: absolute; top: -5px; }
	.agv-nav-toggle__bars::after  { content: ""; position: absolute; top: 5px; }
	.agv-nav-toggle[aria-expanded="true"] .agv-nav-toggle__bars { background: transparent; }
	.agv-nav-toggle[aria-expanded="true"] .agv-nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
	.agv-nav-toggle[aria-expanded="true"] .agv-nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }
	.agv-search { margin-left: 0; }
	.agv-cockpit__row--instruments { display: none; }
	.agv-cockpit__notice { display: none; }
	:root { --agv-cockpit-h: 92px; }
}

@media (max-width: 640px) {
	.agv-cockpit__controls > .agv-chip,
	.agv-cockpit__controls > .agv-btn,
	.agv-icon-btn[data-action="theme"],
	.agv-icon-btn[data-action="accessibility"] { display: none; }
	.agv-cockpit__controls > .agv-chip--select:first-of-type { display: inline-flex; }
	.agv-search__kbd { display: none; }
}

/* --- Mobile navigation ----------------------------------------------- */
.agv-mobile-nav {
	/* Full-viewport: the header it opens from can scroll out of view. */
	position: fixed; inset: 0;
	z-index: calc(var(--agv-z-header) - 1);
	background: var(--agv-surface);
	overflow-y: auto;
	padding: var(--agv-s5) var(--agv-gutter) var(--agv-s8);
}
.agv-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.agv-mobile-nav__list li { margin: 0; border-bottom: 1px solid var(--agv-line-2); }
.agv-mobile-nav__list a {
	display: block; padding: var(--agv-s4) 0;
	font-family: var(--agv-display); font-size: var(--agv-t-lg);
	text-decoration: none; color: var(--agv-ink);
}
.agv-mobile-nav__actions { display: grid; gap: var(--agv-s3); margin-top: var(--agv-s6); }