/**
 * SEQ Endoscopy Microorganisms
 *
 * Scoped to .seq-micro. Colours inherit from the theme where possible; risk
 * colours are defined here because they carry meaning the theme cannot supply.
 */

.seq-micro {
	--seq-critical: #b3261e;
	--seq-critical-bg: #fdecea;
	--seq-high: #b45309;
	--seq-high-bg: #fef3e2;
	--seq-amber: #8a6100;
	--seq-amber-bg: #fdf6e3;
	--seq-low: #2e6930;
	--seq-low-bg: #edf7ed;
	--seq-border: #e2e5e9;
	--seq-hairline: #e8ebef;
	--seq-muted: #5b6470;
	--seq-radius: 6px;

	/*
	 * Active/hover row colours. Inherits the host theme's palette when it has one
	 * (Astra exposes --ast-global-color-*), so the section matches the brand
	 * without hardcoding it; falls back to a neutral navy elsewhere.
	 */
	--seq-accent: var(--ast-global-color-1, #083351);
	--seq-accent-text: var(--ast-global-color-5, #ffffff);

	/*
	 * Panel colours for the filter bar and table headers. Same brand-palette
	 * inheritance as the accent: --ast-global-color-1 is SEQ's navy, and the
	 * tint is the brand's own pale blue.
	 */
	--seq-panel: var(--ast-global-color-1, #083351);
	--seq-panel-text: var(--ast-global-color-5, #ffffff);
	--seq-tint: var(--ast-global-color-4, #eff2ff);

	margin: 0 0 2rem;
}

/*
 * Own visually-hidden helper. Most themes define .screen-reader-text, but a
 * plugin cannot assume it — when the theme does not, the text renders on screen.
 */
.seq-micro .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Intro, legend, disclaimer ---------- */

.seq-micro__intro {
	margin: 0 0 1.5rem;
	max-width: 68ch;
}

.seq-legend {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
}

.seq-legend th,
.seq-legend td {
	text-align: left;
	vertical-align: top;
	/* Even padding on all four sides — cells previously had none on the left. */
	padding: 1rem;
	border-bottom: 1px solid var(--seq-border);
}

.seq-legend thead th {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-panel-text);
	background: var(--seq-panel);
	border-bottom: 0;
}

.seq-legend thead th:first-child {
	border-top-left-radius: var(--seq-radius);
	border-bottom-left-radius: var(--seq-radius);
}

.seq-legend thead th:last-child {
	border-top-right-radius: var(--seq-radius);
	border-bottom-right-radius: var(--seq-radius);
}

.seq-legend tbody th {
	width: 1%;
	white-space: nowrap;
	font-weight: 400;
}

/* No rule under the final row — the table ends on content, not a line. */
.seq-legend tbody tr:last-child th,
.seq-legend tbody tr:last-child td {
	border-bottom: 0;
}

.seq-micro__disclaimer {
	margin: 2.5rem 0 0;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--seq-border);
	border-left: 4px solid var(--seq-accent);
	border-radius: var(--seq-radius);
	background: #fafbfc;
	font-size: 0.9375rem;
}

.seq-micro__disclaimer-title {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-muted);
}

.seq-micro__disclaimer p:last-child {
	margin-bottom: 0;
}

/* ---------- Filters ---------- */

/*
 * Filters sit in one horizontal row, each control stacked under its own label.
 * They wrap to two rows on narrow desktops and to a single column on mobile.
 */
.seq-micro__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.875rem 1rem;
	padding: 1.25rem 1.5rem;
	border: 0;
	border-radius: var(--seq-radius);
	background: var(--seq-panel);
	margin: 0 0 1.25rem;
}

/* flex-basis 0 so every control gets an identical share of the row. */
.seq-micro__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 0;
	min-width: 7rem;
	margin: 0;
}

/* Labels sit on the brand panel, so they take the panel's text colour. */
.seq-micro .seq-micro__field label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-panel-text);
}

/*
 * Explicit height on all three control types. Themes apply their own padding to
 * inputs and selects (Astra makes the search input taller than the selects), so
 * matching padding alone does not produce matching heights.
 */
.seq-micro .seq-micro__field select,
.seq-micro .seq-micro__search,
.seq-micro .seq-micro__reset {
	box-sizing: border-box;
	height: 2.5rem;
	width: 100%;
	min-width: 0;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 0 0.6rem;
	border: 1px solid var(--seq-border);
	border-radius: var(--seq-radius);
	background: #fff;
	color: inherit;
}

/*
 * Reset takes the same share as the other controls. It has no label, so it is
 * pinned to the bottom of the row to line up with the selects and the input.
 */
.seq-micro__field--action {
	align-self: flex-end;
}

/*
 * Reset is a real <button>, so the host theme will try to style it. Declare
 * background AND colour on every state — see the note on .seq-micro__link.
 */
/* Sizing comes from the shared control rule above; this is appearance only. */
.seq-micro .seq-micro__reset {
	appearance: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.12s ease, color 0.12s ease;
}

/*
 * Hover tints toward the brand pale blue rather than filling with the accent —
 * the button sits ON the accent-coloured panel, so an accent fill would make it
 * disappear into the bar.
 */
.seq-micro .seq-micro__reset:hover,
.seq-micro .seq-micro__reset:focus-visible {
	background: var(--seq-tint);
	color: var(--seq-panel);
	border-color: var(--seq-tint);
}

/* Focus ring needs to read against the dark panel, not the page. */
.seq-micro .seq-micro__field select:focus-visible,
.seq-micro .seq-micro__search:focus-visible,
.seq-micro .seq-micro__reset:focus-visible {
	outline: 2px solid var(--seq-panel-text);
	outline-offset: 2px;
}

.seq-micro__count {
	font-size: 0.875rem;
	color: var(--seq-muted);
	margin: 0 0 1.5rem;
}

.seq-micro__empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--seq-muted);
	border: 1px dashed var(--seq-border);
	border-radius: var(--seq-radius);
	margin: 0 0 1.5rem;
}

/* ---------- Groups ---------- */

.seq-micro__group + .seq-micro__group {
	margin-top: 2.5rem;
}

.seq-micro__group[hidden] {
	display: none;
}

/*
 * Hairline rather than a 2px currentColor bar — the heading already carries the
 * weight, and a heavy rule competed with the row dividers below it.
 */
.seq-micro__group-title {
	margin: 0 0 0.35rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--seq-border);
}

.seq-micro__group-note {
	font-size: 0.875rem;
	color: var(--seq-muted);
	margin: 0.75rem 0 0;
}

.seq-micro__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

/*
 * Hairline dividers between rows only — no rule above the first or below the
 * last, so the list reads as one block rather than a boxed table.
 */
.seq-micro__item {
	margin: 0;
	border-top: 1px solid var(--seq-hairline);
}

.seq-micro__item:first-child {
	border-top: 0;
}

.seq-micro__item[hidden] {
	display: none;
}

/*
 * Brief tint on the row the reader just came back from, so "back" lands
 * somewhere recognisable in a 62-row list rather than just near it.
 */
.seq-micro__item.is-returned {
	background: var(--seq-tint);
	border-radius: var(--seq-radius);
	box-shadow: inset 3px 0 0 var(--seq-accent);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/*
 * Rows are links, not buttons — a link opens the organism's page. Declaring both
 * background and colour on every state anyway, because themes style anchors too
 * and inheriting half a pair is what produced the earlier white-on-white bug.
 *
 * No fill on hover: the affordance is the arrow and the accent colour, so the
 * row stays legible and the risk badge keeps its own meaning.
 */
.seq-micro .seq-micro__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	text-decoration: none;
	padding: 0.85rem 0.25rem;
	border-radius: 0;
	background: none;
	color: inherit;
	transition: color 0.12s ease;
}

.seq-micro .seq-micro__link:hover,
.seq-micro .seq-micro__link:focus-visible {
	background: none;
	color: var(--seq-accent);
	text-decoration: none;
}

.seq-micro .seq-micro__link:focus-visible {
	outline: 2px solid var(--seq-accent);
	outline-offset: -2px;
}

.seq-micro__name {
	flex: 1 1 auto;
	min-width: 0;
	font-style: italic;
	font-weight: 600;
}

/*
 * Chevron drawn in CSS so it inherits currentColor and needs no icon font.
 * It nudges right on hover to reinforce that the row goes somewhere.
 */
.seq-micro__arrow {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 0.35rem 0 0.25rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.45;
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.seq-micro .seq-micro__link:hover .seq-micro__arrow,
.seq-micro .seq-micro__link:focus-visible .seq-micro__arrow {
	opacity: 1;
	transform: rotate(45deg) translate(2px, -2px);
}

/* ---------- Risk badge ---------- */

.seq-badge {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	padding: 0.35rem 0.6rem;
	border-radius: 999px;
}

.seq-badge--critical { color: var(--seq-critical); background: var(--seq-critical-bg); }
.seq-badge--high     { color: var(--seq-high);     background: var(--seq-high-bg); }
.seq-badge--amber    { color: var(--seq-amber);    background: var(--seq-amber-bg); }
.seq-badge--low      { color: var(--seq-low);      background: var(--seq-low-bg); }

.seq-micro__dl {
	display: grid;
	grid-template-columns: minmax(8rem, 10rem) 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.seq-micro__dl dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-muted);
	margin: 0;
}

.seq-micro__dl dd {
	margin: 0;
}

/* ---------- Escalation table ---------- */

.seq-escalation {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.seq-escalation th,
.seq-escalation td {
	text-align: left;
	vertical-align: top;
	padding: 1rem;
	border-bottom: 1px solid var(--seq-border);
}

.seq-escalation thead th {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-panel-text);
	background: var(--seq-panel);
	border-bottom: 0;
}

.seq-escalation thead th:first-child {
	border-top-left-radius: var(--seq-radius);
	border-bottom-left-radius: var(--seq-radius);
}

.seq-escalation thead th:last-child {
	border-top-right-radius: var(--seq-radius);
	border-bottom-right-radius: var(--seq-radius);
}

.seq-escalation tbody tr:last-child th,
.seq-escalation tbody tr:last-child td {
	border-bottom: 0;
}

.seq-escalation tbody th {
	width: 32%;
	font-weight: 600;
}

/* ---------- Single ---------- */

/* Back link sits above the breadcrumb — the primary way out of a detail page. */
.seq-single__back {
	margin: 0 0 0.6rem;
	font-size: 0.875rem;
}

.seq-micro .seq-single__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--seq-accent);
	text-decoration: none;
}

.seq-micro .seq-single__back a:hover,
.seq-micro .seq-single__back a:focus-visible {
	text-decoration: underline;
}

/* Chevron mirrors the one on the index rows, pointing back. */
.seq-single__back-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.12s ease;
}

.seq-micro .seq-single__back a:hover .seq-single__back-arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

.seq-single__breadcrumb {
	font-size: 0.8125rem;
	color: var(--seq-muted);
	margin: 0 0 0.75rem;
}

.seq-single__breadcrumb span[aria-hidden] {
	margin: 0 0.4rem;
	opacity: 0.6;
}

.seq-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.seq-single__tag {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--seq-border);
	border-radius: 999px;
	color: var(--seq-muted);
}

.seq-single__section {
	margin: 2rem 0 0;
}

.seq-single__section h2 {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.seq-single__list {
	margin: 0;
	padding-left: 1.25rem;
}

.seq-single__list li {
	margin: 0 0 0.25rem;
}

/*
 * Sits at the top of the page, directly under the title, so a reader holding a
 * lab report gets the rating and the action before the background reading.
 */
.seq-single__assessment {
	margin: 1.25rem 0 1.75rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--seq-border);
	border-left: 4px solid var(--seq-accent);
	border-radius: var(--seq-radius);
	background: var(--seq-tint);
}

.seq-single__assessment--critical { border-left-color: var(--seq-critical); }
.seq-single__assessment--high     { border-left-color: var(--seq-high); }
.seq-single__assessment--amber    { border-left-color: var(--seq-amber); }
.seq-single__assessment--low      { border-left-color: var(--seq-low); }

.seq-single__assessment h2 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--seq-muted);
}

.seq-single__sources ol {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.875rem;
	color: var(--seq-muted);
}

.seq-single__sources li {
	margin: 0 0 0.4rem;
}

.seq-single__reviewed {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--seq-muted);
}

.seq-single__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--seq-border);
	font-size: 0.875rem;
}

.seq-single__nav a {
	display: block;
}

.seq-single__nav span {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seq-muted);
}

.seq-single__next {
	text-align: right;
	margin-left: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
	/* The horizontal row collapses to one control per line. */
	.seq-micro__field {
		flex: 1 1 100%;
	}

	.seq-micro .seq-micro__reset {
		width: 100%;
	}

	/*
	 * Name on its own line, then badge and arrow beneath it with the arrow
	 * pinned right — the row stays scannable without truncating binomials.
	 */
	.seq-micro__link {
		flex-wrap: wrap;
		gap: 0.3rem 0.6rem;
	}

	.seq-micro__name {
		flex-basis: 100%;
	}

	.seq-micro__arrow {
		margin-left: auto;
	}

	.seq-escalation tbody th {
		width: auto;
	}

	/* Legend and escalation tables reflow to stacked rows on small screens. */
	.seq-legend thead {
		display: none;
	}

	.seq-legend tr {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--seq-border);
	}

	.seq-legend th,
	.seq-legend td {
		display: block;
		width: auto;
		padding: 0.15rem 0;
		border: 0;
	}

	.seq-single__nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.seq-single__next {
		text-align: left;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seq-micro *,
	.seq-micro *::before,
	.seq-micro *::after {
		transition: none !important;
	}
}