/*
 * ingredients.css — laddas bara på sidan med mallen "Ingredients".
 *
 * Sidan är ett register: 143 rader som ska gå att skanna med ögat och
 * öppna en i taget. Därför inga kort och ingen skugga — bara en rad per
 * ingrediens, skild från nästa med ett hårstreck, som i en innehålls-
 * förteckning. Det som är utfällt får luft, det som är hopfällt får inte.
 *
 * Budget: ≤ 3 kB gzippad. Mät med ./scripts/css-budget.py.
 */

@layer layout {

	/*
	 * En läsbar spalt, som Om oss. Filterraden och listan ligger i samma
	 * bredd — en filterrad bredare än innehållet den filtrerar ser ut att
	 * höra till något annat.
	 */
	.ingredients > * {
		max-width: var(--content-max);
		margin-inline: auto;
	}

	.ingredients__intro > * + * {
		margin-block-start: var(--space-s);
	}

	.ingredients__search,
	.ingredients__filters,
	.ingredients__count {
		margin-block-start: var(--space-m);
	}

	.ingredients__list {
		margin-block-start: var(--space-s);
	}

	.ingredients__note,
	.ingredients__cta,
	.coa {
		margin-block-start: var(--space-2xl);
	}

	.ingredients__jump,
	.ingredients__disclaimer,
	.ingredients__empty,
	.ingredients__more {
		margin-block-start: var(--space-l);
	}

	.coa__explainer,
	.coa__brands,
	.coa__faq,
	.coa__credit {
		margin-block-start: var(--space-l);
	}

	/* Gruppen får luft över sig, listan bara ett andetag under rubriken. */
	.coa__group {
		margin-block-start: var(--space-m);
	}

	.coa__list,
	.coa__links {
		margin-block-start: var(--space-s);
	}
}

@layer components {

	/* --- Ingress ---------------------------------------------------- */

	.ingredients__eyebrow {
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.ingredients__lead {
		font-size: var(--step-1);
		line-height: 1.6;
	}

	/*
	 * Genvägen till testerna ligger i ett kort. Lös i brödtexten läste den
	 * som en länk bland andra — ramen och den varma ytan gör att den blir
	 * ett eget erbjudande och inte en fotnot till ingressen.
	 */
	.ingredients__jump {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s) var(--space-m);
		align-items: center;
		justify-content: space-between;
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-surface-cream);
	}

	/* Texten får krympa så att knappen orkar upp bredvid den på breda skärmar. */
	.ingredients__jump-text {
		flex: 1 1 22rem;
	}

	.ingredients__jump-title {
		font-weight: 600;
		color: var(--color-ink);
	}

	.ingredients__jump-note {
		margin-block-start: var(--space-3xs);
		font-size: var(--step--1);
		text-wrap: pretty;
	}

	/*
	 * Konturknapp och inte fylld: den fyllda knappen på sidan är "Go to the
	 * shop" längst ned, och två fyllda knappar på samma sida gör att ingen
	 * av dem betyder något.
	 */
	.ingredients__jump-link {
		display: inline-block;
		padding: var(--space-2xs) var(--space-m);
		font-size: var(--step--1);
		font-weight: 500;
		color: var(--color-accent-ink);
		text-decoration: none;
		border: 1px solid var(--color-accent-ink);
		border-radius: var(--radius-pill);
	}

	.ingredients__jump-link:hover {
		color: var(--color-paper);
		background: var(--color-accent-ink);
	}

	/* --- Sökfält ---------------------------------------------------- */

	.ingredients__search-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ingredients__search-field {
		width: 100%;
		padding: var(--space-xs) var(--space-s);
		font: inherit;
		color: var(--color-ink);
		background: var(--color-paper);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
	}

	.ingredients__search-field:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	/* --- Filterrad -------------------------------------------------- */

	.ingredients__filters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
	}

	.ingredients__filter {
		padding: 0.4rem 0.85rem;
		font-size: var(--step--1);
		line-height: 1.3;
		color: var(--color-body);
		text-decoration: none;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
	}

	.ingredients__filter:hover {
		color: var(--color-ink);
		border-color: var(--color-ink-muted);
	}

	.ingredients__filter.is-active {
		color: var(--color-paper);
		background: var(--color-accent-ink);
		border-color: var(--color-accent-ink);
	}

	/*
	 * Tjugoen chips radbryter till sex rader på en telefon — en halv
	 * skärm innan första ingrediensen. Under 768 px blir raden därför en
	 * svepbar remsa, samma grepp som butikens kategorirad, och `wrap` i
	 * stället för `nowrap` behövs inte: en enda rad är hela poängen.
	 */
	@media (max-width: 767px) {

		.ingredients__filters {
			flex-wrap: nowrap;
			padding-block-end: var(--space-3xs);
			overflow-x: auto;
			scroll-snap-type: x proximity;
			scrollbar-width: thin;
			scrollbar-color: var(--color-line) transparent;
		}

		.ingredients__filter {
			flex-shrink: 0;
			scroll-snap-align: start;
		}
	}

	.ingredients__count {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/* --- En ingrediens ---------------------------------------------- */

	/*
	 * Hopvikta rader tas ur flödet av CSS, inte av `hidden`. `hidden`
	 * bär filtrets tillstånd, och de två får inte skriva över varandra —
	 * en rad kan vara bortfiltrerad och hopvikt samtidigt.
	 *
	 * En <noscript>-regel i mallen fäller ut allt igen när JS uteblir.
	 * Den ligger utanför alla lager och vinner därför över den här utan
	 * att någon behöver skriva !important.
	 */
	.ingredient--folded {
		display: none;
	}

	.ingredient {
		border-block-end: 1px solid var(--color-line);
	}

	.ingredient__summary {
		display: flex;
		gap: var(--space-s);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-s);
		cursor: pointer;
		list-style: none;
	}

	/* Safari ritar en egen triangel som inte går åt med list-style. */
	.ingredient__summary::-webkit-details-marker {
		display: none;
	}

	.ingredient__summary:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: -2px;
	}

	.ingredient__head {
		min-width: 0;
	}

	.ingredient__name {
		font-size: var(--step-0);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.ingredient__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		align-items: center;
		margin-block-start: var(--space-3xs);
	}

	.ingredient__cat {
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.ingredient__badge {
		padding: 0.15rem 0.5rem;
		font-size: 0.72rem;
		color: var(--color-ink);
		background: var(--color-surface-blush);
		border-radius: var(--radius-pill);
	}

	/*
	 * Plustecknet ritas av två streck i stället för av ett tecken: ett
	 * "+" i systemfonten sitter olika högt i olika typsnitt, och raden
	 * skulle då se ojämn ut mellan Mac och Windows.
	 */
	.ingredient__plus {
		position: relative;
		flex-shrink: 0;
		width: 1rem;
		height: 1rem;
	}

	.ingredient__plus::before,
	.ingredient__plus::after {
		position: absolute;
		content: "";
		background: var(--color-accent);
	}

	.ingredient__plus::before {
		inset-block-start: calc(50% - 1px);
		inset-inline-start: 0;
		width: 1rem;
		height: 2px;
	}

	.ingredient__plus::after {
		inset-block-start: 0;
		inset-inline-start: calc(50% - 1px);
		width: 2px;
		height: 1rem;
		transition: transform 0.15s ease;
	}

	.ingredient__details[open] .ingredient__plus::after,
	.coa__brand[open] .ingredient__plus::after {
		transform: rotate(90deg);
	}

	/* --- Utfälld text ----------------------------------------------- */

	.ingredient__body {
		max-width: 40rem;
		padding-block-end: var(--space-l);
	}

	.ingredient__body > * + * {
		margin-block-start: var(--space-s);
	}

	.ingredient__intro {
		color: var(--color-ink);
	}

	.ingredient__subheading {
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--color-ink);
	}

	.ingredient__subheading + p,
	.ingredient__subheading + ul {
		margin-block-start: var(--space-2xs);
	}

	.ingredient__research {
		padding-inline-start: 1.15rem;
		list-style: disc;
	}

	.ingredient__research li + li {
		margin-block-start: var(--space-3xs);
	}

	/*
	 * Nyckeltalen. Tre spalter på skrivbord, en enda på telefon —
	 * "With a fat-containing meal" i en tredjedels spalt blir fyra rader.
	 */
	.ingredient__stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
		gap: var(--space-s);
		padding: var(--space-s);
		background: var(--color-surface-cream);
		border-radius: var(--radius-card);
	}

	.ingredient__stat dt {
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.ingredient__stat dd {
		margin-block-start: var(--space-3xs);
		font-size: var(--step-0);
		color: var(--color-ink);
	}

	.ingredient__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	.ingredient__link {
		font-size: var(--step--1);
		font-weight: 500;
		color: var(--color-accent-ink);
		text-decoration: none;
	}

	.ingredient__link::after {
		content: " \2192";
	}

	.ingredient__link:hover {
		text-decoration: underline;
	}

	/* --- Knapp, tomt läge och avslutning ---------------------------- */

	/*
	 * `display: block` behövs. En knapp är inline-block, och då biter inte
	 * `margin-inline: auto` från `.ingredients > *` — knappen la sig i
	 * vänsterkanten av hela wrappen i stället för i spalten den hör till,
	 * alltså ett par hundra pixlar till vänster om listan ovanför.
	 */
	.ingredients__more {
		display: block;
		width: 100%;
		padding: var(--space-xs) var(--space-s);
		font: inherit;
		font-size: var(--step--1);
		color: var(--color-ink);
		cursor: pointer;
		background: none;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
	}

	.ingredients__more:hover {
		border-color: var(--color-ink-muted);
	}

	.ingredients__empty {
		color: var(--color-body);
	}

	.ingredients__note > * + * {
		margin-block-start: var(--space-s);
	}

	.ingredients__disclaimer {
		font-size: var(--step--1);
		line-height: 1.6;
		color: var(--color-ink-muted);
	}

	/* --- Analyscertifikaten ----------------------------------------- */

	.coa__intro > * + * {
		margin-block-start: var(--space-s);
	}

	/*
	 * Förklaringsrutan är det enda på sidan som inte är löptext eller en
	 * rad i ett register, och den ska läsas före listan. Därför den
	 * indragna kanten i stället för ännu ett kort — sidan har redan två.
	 */
	.coa__explainer {
		padding-inline-start: var(--space-s);
		border-inline-start: 3px solid var(--color-accent);
	}

	.coa__explainer h3,
	.coa__faq h3 {
		font-size: var(--step-0);
		font-weight: 600;
		color: var(--color-ink);
	}

	.coa__explainer p,
	.coa__faq p {
		margin-block-start: var(--space-2xs);
	}

	/*
	 * Ett märke i taget. `<details name>` sköter uteslutningen, så det här
	 * lagret behöver bara rita raden — samma hårstreck som ingredienserna
	 * har, så att sidan känns som en enda lista rakt igenom.
	 */
	.coa__brand {
		border-block-end: 1px solid var(--color-line);
	}

	.coa__brand:first-child {
		border-block-start: 1px solid var(--color-line);
	}

	.coa__brand-summary {
		display: flex;
		gap: var(--space-s);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-s);
		cursor: pointer;
		list-style: none;
	}

	.coa__brand-summary::-webkit-details-marker {
		display: none;
	}

	.coa__brand-summary:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: -2px;
	}

	.coa__brand-name {
		display: block;
		font-size: var(--step-0);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.coa__brand-status {
		display: block;
		margin-block-start: var(--space-3xs);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	/*
	 * Bredden sitter på texten och inte på panelen. Löptext vill ha 40rem,
	 * men Blueprints tjugofyra rapporter vill ha hela spalten — annars
	 * ryms bara två kort i bredd och listan blir tolv rader lång.
	 */
	.coa__brand-body {
		padding-block-end: var(--space-l);
	}

	.coa__brand-body > p {
		max-width: 40rem;
	}

	.coa__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
	}

	.coa__group {
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.coa__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
		gap: var(--space-2xs);
	}

	.coa__item {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
	}

	.coa__item:has(.coa__file:hover) {
		border-color: var(--color-ink-muted);
	}

	/*
	 * `align-content` måste sättas: korten i en rad är lika höga, och utan
	 * den fördelas överskottet mellan raderna i det kortaste kortet — då
	 * hamnar datumet i botten på "Cocoa Powder" och uppe i grannen.
	 */
	.coa__file {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-2xs);
		align-content: flex-start;
		align-items: baseline;
		padding: var(--space-s);
		text-decoration: none;
	}

	.coa__file:hover .coa__name {
		text-decoration: underline;
	}

	/*
	 * "PDF" är en etikett och inte en ikon: den som laddar ner ska veta
	 * vad som kommer, och en filsymbol säger inte om det är ett kalkylblad.
	 */
	.coa__type {
		padding: 0.1rem 0.4rem;
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		color: var(--color-paper);
		background: var(--color-accent-ink);
		border-radius: var(--radius-pill);
	}

	.coa__name {
		flex-basis: 100%;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.coa__date {
		flex-basis: 100%;
		font-size: 0.72rem;
		color: var(--color-ink-muted);
	}

	/*
	 * En rapport kan gälla flera varor — hela smakserien delar analys. Bara
	 * den sista raden bär bottenluften, annars växer kortet med en tom rad
	 * per smak.
	 */
	.coa__product {
		padding: 0 var(--space-s);
		font-size: 0.72rem;
		color: var(--color-accent-ink);
		text-decoration: none;
	}

	.coa__product:last-child {
		padding-block-end: var(--space-s);
	}

	.coa__product::after {
		content: " \2192";
	}

	.coa__product:hover {
		text-decoration: underline;
	}

	.coa__faq h4 {
		margin-block-start: var(--space-s);
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.coa__faq h4 + p {
		margin-block-start: var(--space-3xs);
	}

	.coa__credit {
		font-size: 0.72rem;
		line-height: 1.6;
		color: var(--color-ink-muted);
	}

	/* Samma avslutningskort som Om oss har. */
	.ingredients__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s);
		align-items: center;
		justify-content: space-between;
		padding: var(--space-l);
		background: var(--color-surface-card);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-panel);
	}

	.ingredients__cta-title {
		font-size: var(--step-1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.ingredients__cta-text {
		margin-block-start: var(--space-3xs);
		font-size: var(--step--1);
		color: var(--color-body);
	}

	.ingredients__button {
		padding: var(--space-xs) var(--space-m);
		color: var(--color-button-text);
		text-decoration: none;
		background: var(--color-button);
		border-radius: var(--radius-pill);
	}
}