/*
 * NGL v2 — a lab's own page (Figma "Lab Details" 165:17360, design/lab-details): the fields with their
 * product groups and the reference standards. The page under the solid header, breadcrumbs, eyebrow,
 * hero, highlights, section heads, featured equipment and closing section are in inner.css (the
 * inspection and metrology pages use them too; the highlights, section head and equipment moved there
 * on 2026-10-03), the consultation dialog in dialog.css.
 *
 * Desktop values are the 1440px frame's. Logical properties throughout, so the RTL design mirrors for
 * English. Text has no fixed width or height: a longer translation wraps and makes its box taller.
 * Figma positions are physical; where the design puts something on the left in RTL (inline-end), the
 * markup orders it last.
 */

.nglv2-ipage--lab {
	--nglv2-igap: clamp(48px, 5.5556vw, 80px); /* between the page's sections: 80 at 1440 */
	--nglv2-lab-green: var(--nglv2-icon-green);
	--nglv2-lab-soft: var(--nglv2-soft-green);
	--nglv2-lab-muted: #586965;                /* grey-green secondary text */
	--nglv2-lab-link: #538212;                 /* small green links: #6dbe45 is 2.3:1 on white */
}

/* ----------------------------------------------------------------------------------------------
 * Fields and product groups (Figma 189:8619): side menu 260 at the inline-start, cards 908
 * ------------------------------------------------------------------------------------------- */

.nglv2-lscope {
	margin-top: var(--nglv2-igap);
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

.nglv2-lscope__inner {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.nglv2-lscope__side {
	position: sticky;
	top: calc(var(--nglv2-header-h) + 32px);
	display: flex;
	flex: 0 0 260px;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	min-width: 0;
}

.admin-bar .nglv2-lscope__side {
	top: calc(var(--nglv2-header-h) + 32px + 32px);
}

/* The track is the menu's inline-end border (3px, 24 from the names); the chosen field's marker
 * covers it beside that field. */
.nglv2-lscope__menu {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 255px;
	max-width: 100%;
	padding-inline-end: 24px;
	border-inline-end: 3px solid rgba(22, 139, 82, 0.1);
}

.nglv2 .nglv2-lscope__tab {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-height: 24px;
	font-size: 16px;
	line-height: 24px;
	color: #a0a0a0;
	transition: color 0.25s;
}

.nglv2 .nglv2-lscope__tab:hover,
.nglv2 .nglv2-lscope__tab.is-active {
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-lscope__tab.is-active .nglv2-lscope__name {
	font-weight: 600;
}

.nglv2 .nglv2-lscope__tab::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: -27px;
	width: 3px;
	height: 24px;
	background: var(--nglv2-accent);
	opacity: 0;
	transition: opacity 0.25s;
}

.nglv2 .nglv2-lscope__tab.is-active::after {
	opacity: 1;
}

.nglv2 .nglv2-lscope__tab:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 4px;
	border-radius: 4px;
}

.nglv2-lscope__num {
	flex: 0 0 auto;
}

.nglv2-lscope__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.nglv2 .nglv2-lscope__updated {
	align-self: flex-end; /* inline-end: the left in RTL, on the side menu title's line */
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	color: var(--nglv2-grey);
}

.nglv2-lscope__panel {
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
	outline: none;
}

.nglv2-lscope__panel + .nglv2-lscope__panel {
	margin-top: 40px;
}

/* Without the script every field is listed under its own heading; with it the side menu labels the
 * one field shown. Until the script runs, only the first field shows. */
.nglv2 .nglv2-lscope__ptitle {
	margin-bottom: 16px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2-js .nglv2-lscope .nglv2-lscope__ptitle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.nglv2-js .nglv2-lscope:not(.is-tabs) .nglv2-lscope__panel ~ .nglv2-lscope__panel,
.nglv2-lscope__panel[hidden] {
	display: none;
}

.nglv2-js .nglv2-lscope__panel + .nglv2-lscope__panel {
	margin-top: 0;
}

.nglv2 .nglv2-lscope__text {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--nglv2-lab-muted);
}

.nglv2 .nglv2-lscope__text > * + * {
	margin-top: 8px;
}

.nglv2-lscope__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

/* A card: icon and group title, the products in two columns filled column by column (5 → 3 + 2,
 * 4 → 2 + 2), then "N more products". Cards without that button keep the products 44 under the
 * title; with it, the products sit halfway between (Figma). */
.nglv2-lgroup {
	container: nglv2-lgroup / inline-size;
	display: flex;
	flex-direction: column;
	gap: 44px;
	min-width: 0;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
}

.nglv2-lgroup.has-items {
	min-height: 255px;
}

.nglv2-lgroup.has-more {
	justify-content: space-between;
	gap: 24px;
}

.nglv2-js .nglv2-lscope__panel:not(.is-all) .nglv2-lgroup.is-extra {
	display: none;
}

.nglv2-lgroup__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-lgroup__icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--nglv2-lab-soft);
	color: var(--nglv2-lab-green);
}

.nglv2 .nglv2-lgroup__icon .nglv2-icon,
.nglv2 .nglv2-lgroup__img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.nglv2 .nglv2-lgroup__title {
	min-width: 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: #4c4c4c;
}

.nglv2 .nglv2-lgroup__items {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--nglv2-rows, 1), auto);
	grid-auto-columns: auto;
	justify-content: start;
	gap: 16px 32px;
}

.nglv2-lgroup.is-open .nglv2-lgroup__items,
html:not(.nglv2-js) .nglv2-lgroup__items {
	grid-template-rows: repeat(var(--nglv2-rows-all, 1), auto);
}

.nglv2 .nglv2-lgroup__items > li {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	font-size: 14px;
	line-height: 16.5px;
	color: var(--nglv2-lab-muted);
}

.nglv2 .nglv2-lgroup__items > li::before {
	content: "";
	flex: 0 0 3px;
	height: 3px;
	margin-top: 7px;
	border-radius: 2px;
	background: var(--nglv2-accent);
}

.nglv2-js .nglv2-lgroup:not(.is-open) .nglv2-lgroup__items > .is-more {
	display: none;
}

/* A narrow card (below 1200px, and on phones) lists its products in one column: two columns of
 * 130-140px wrap most names over three or four lines. The design's 442px card keeps two. */
@container nglv2-lgroup (max-width: 359px) {
	.nglv2 .nglv2-lgroup__items {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}
}

.nglv2 .nglv2-lgroup__more {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--nglv2-lab-link);
	font-family: var(--nglv2-font);
	font-weight: 700;
	font-size: 10px;
	line-height: 15px;
	text-transform: none;
	cursor: pointer;
	transition: color 0.25s;
}

.nglv2 .nglv2-lgroup__more:hover {
	color: var(--nglv2-green-dark);
}

.nglv2 .nglv2-lgroup__more:focus-visible,
.nglv2 .nglv2-lscope__all:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

html:not(.nglv2-js) .nglv2-lgroup__more,
html:not(.nglv2-js) .nglv2-lscope__all {
	display: none;
}

.nglv2 .nglv2-lscope__all {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto 0;
	min-height: 44px;
	padding: 0 28px;
	border: 1px solid var(--nglv2-accent);
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: var(--nglv2-lab-link);
	font-family: var(--nglv2-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}

.nglv2 .nglv2-lscope__all:hover {
	background: var(--nglv2-green-50);
	color: var(--nglv2-green-dark);
}

.nglv2-lscope__panel.is-all .nglv2-lscope__all {
	display: none;
}

/* A field without product groups (not drawn): a short note, its standards and the chat button. */
.nglv2-lscope__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border-radius: 16px;
	background: #fff;
}

.nglv2 .nglv2-lscope__empty p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--nglv2-lab-muted);
}

.nglv2 .nglv2-lscope__codes {
	color: #4c4c4c;
}

.nglv2 .nglv2-lscope__codes bdi {
	font-weight: 600;
}

/* ----------------------------------------------------------------------------------------------
 * Reference standards (Figma 224:8183): a navy box, header and note bands, rows 53 apart.
 * be.css styles every table with !important borders, backgrounds and hover colours; these rules
 * undo them for this one.
 * ------------------------------------------------------------------------------------------- */

.nglv2-lstd {
	margin-top: var(--nglv2-igap);
}

.nglv2-lstd__box {
	overflow: hidden;
	border-radius: 18px;
	background: var(--nglv2-navy);
}

.nglv2 .nglv2-lstd__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-family: var(--nglv2-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	text-align: start;
}

.nglv2 .nglv2-lstd__table thead,
.nglv2 .nglv2-lstd__table tfoot {
	background: #162033;
}

.nglv2 .nglv2-lstd__table th,
.nglv2 .nglv2-lstd__table td {
	padding: 12.5px 0;
	border: 0 !important;
	background: transparent;
	box-shadow: none;
	font-weight: 500;
	text-align: start;
	vertical-align: middle;
}

.nglv2 .nglv2-lstd__table th {
	padding-block: 16px;
	color: #b2b2b2;
}

.nglv2 .nglv2-lstd__table tbody tr:first-child td {
	padding-top: 16px;
}

.nglv2 .nglv2-lstd__table tbody tr:last-child td {
	padding-bottom: 16px;
}

.nglv2 .nglv2-lstd__table tbody tr + tr td {
	border-top: 0.5px solid rgba(255, 255, 255, 0.1) !important;
}

/* Columns: code 40 from the inline-start edge, title after it, type centred 166 and status 62 from
 * the inline-end edge. */
.nglv2 .nglv2-lstd__table .nglv2-lstd__code {
	width: 91px; /* 155 with the padding; a longer code widens the column */
	padding-inline: 40px 24px;
	white-space: nowrap;
}

.nglv2 .nglv2-lstd__table .nglv2-lstd__title {
	padding-inline-end: 24px;
}

.nglv2 .nglv2-lstd__table th {
	white-space: nowrap;
}

.nglv2 .nglv2-lstd__table .nglv2-lstd__type {
	width: 84px;
	text-align: center;
}

.nglv2 .nglv2-lstd__table .nglv2-lstd__status {
	width: 124px;
	text-align: center;
}

.nglv2 .nglv2-lstd__table td.nglv2-lstd__code bdi {
	color: #34d37c;
	white-space: nowrap;
}

.nglv2 .nglv2-lstd__table td.nglv2-lstd__title span {
	color: #ccc;
}

.nglv2 .nglv2-lstd__pill {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #334155;
	border-radius: 6px;
	background: var(--nglv2-navy-2);
	color: #94a3b4;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
}

.nglv2 .nglv2-lstd__status .nglv2-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	color: #10b981;
	vertical-align: middle;
}

.nglv2 .nglv2-lstd__pending {
	color: #94a3b4;
	font-size: 12px;
}

.nglv2 .nglv2-lstd__table tfoot td {
	padding: 16px 24px;
	text-align: center;
	color: #b2b2b2;
}

.nglv2 .nglv2-lstd__term {
	white-space: nowrap;
}

/* ----------------------------------------------------------------------------------------------
 * Not drawn: narrower screens
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	/* The side menu becomes a row of tabs above the cards, scrolled sideways when it does not fit. */
	.nglv2-lscope__inner {
		flex-direction: column;
		gap: 24px;
	}

	.nglv2-lscope__side {
		position: static;
		flex-basis: auto;
		width: 100%;
		gap: 20px;
	}

	/* Full width, not the width of its content: a card is a size container (`container`), so its
	 * content no longer widens the column, which would shrink to 100px. */
	.nglv2-lscope__main {
		align-self: stretch;
	}

	.nglv2-lscope__menu {
		flex-direction: row;
		gap: 28px;
		width: 100%;
		padding: 0 0 14px;
		overflow-x: auto;
		border-inline-end: 0;
		border-bottom: 3px solid rgba(22, 139, 82, 0.1);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.nglv2-lscope__menu::-webkit-scrollbar {
		display: none;
	}

	.nglv2 .nglv2-lscope__tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.nglv2 .nglv2-lscope__tab::after {
		inset-block-start: auto;
		inset-block-end: -17px;
		inset-inline: 0;
		width: auto;
		height: 3px;
	}

	.nglv2 .nglv2-lscope__updated {
		align-self: flex-start;
	}
}

@media (max-width: 767px) {
	/* Standards: each row a block, code with type and status, title under them. */
	.nglv2 .nglv2-lstd__table,
	.nglv2 .nglv2-lstd__table tbody,
	.nglv2 .nglv2-lstd__table tfoot {
		display: block;
	}

	.nglv2 .nglv2-lstd__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.nglv2 .nglv2-lstd__table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 10px 14px;
		padding: 16px 20px;
	}

	.nglv2 .nglv2-lstd__table tbody tr + tr {
		border-top: 0.5px solid rgba(255, 255, 255, 0.1);
	}

	/* The column classes are listed too: the desktop widths and paddings (.nglv2-lstd__code …) outrank
	 * a plain `tbody td` and would squeeze the code under the type pill in the middle rows. */
	.nglv2 .nglv2-lstd__table tbody td,
	.nglv2 .nglv2-lstd__table tbody tr:first-child td,
	.nglv2 .nglv2-lstd__table tbody tr:last-child td,
	.nglv2 .nglv2-lstd__table tbody tr + tr td,
	.nglv2 .nglv2-lstd__table tbody td.nglv2-lstd__code,
	.nglv2 .nglv2-lstd__table tbody td.nglv2-lstd__title,
	.nglv2 .nglv2-lstd__table tbody td.nglv2-lstd__type,
	.nglv2 .nglv2-lstd__table tbody td.nglv2-lstd__status {
		display: block;
		width: auto;
		padding: 0;
		border: 0 !important;
		text-align: start;
	}

	.nglv2 .nglv2-lstd__table td.nglv2-lstd__code bdi {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.nglv2 .nglv2-lstd__table td.nglv2-lstd__title {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.nglv2 .nglv2-lstd__table tfoot tr,
	.nglv2 .nglv2-lstd__table tfoot td {
		display: block;
	}

	.nglv2 .nglv2-lstd__table tfoot td {
		padding: 16px 20px;
		text-align: start;
	}
}

@media (max-width: 639px) {
	.nglv2-lscope__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.nglv2-lgroup.has-items {
		min-height: 0;
	}

	.nglv2-lgroup,
	.nglv2-lscope__empty {
		padding: 20px;
	}}


@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-lscope__tab,
	.nglv2 .nglv2-lscope__tab::after {
		transition: none;
	}
}

/* Phones: a long field name made one scope tab span the whole screen and the tab row scroll far.
 * Smaller text that wraps inside a capped tab keeps the row short and every tab within the screen. */
@media (max-width: 767px) {
	.nglv2 .nglv2-lscope__tab {
		max-width: 62vw;
		font-size: 14px;
		line-height: 21px;
		white-space: normal;
	}
	.nglv2-lscope__name {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}