/*
 * Leserens Lister (#136, ADR-0015 + ADR-0017).
 *
 * Markupen bor i `inc/lister.php` — tre delte funksjoner, ikke en blokk — fordi de tre står på tre
 * ulike flater: kollasjen og menyen på `/konto/mine-oppskrifter/`, og velgeren i heroen på hver
 * oppskriftsside. Stilen bor derfor her og ikke i en blokks `style.scss`, av `kort.css`' egen grunn:
 * den første blokka som rendrer en av dem er ikke den siste, og en ustilt velger på
 * oppskriftssiden ser ut som en ødelagt side og ikke som en glemt import.
 *
 * ── ADR-0003 ─────────────────────────────────────────────────────────────────
 * Ingen media queries. Kollasjen ligger inne i `.ft-kort`, som er `ft-card`-containeren, så hver
 * strukturell bryter her spør *kortets* bredde. Og en `@container`-regel adressert til den
 * containeren elementet selv erklærer, matcher aldri — målt fire steder i dette temaet — så
 * reglene under henger paa `ft-card` fordi kollasjen er et *barn* av den.
 *
 * Bare `var(--wp--preset--*)` og `var(--wp--custom--*)`. Hver rå px er en optisk verdi med en
 * kommentar som sier hvorfor.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─────────────────────────  KOLLASJEN  ─────────────────────────────────────
   Liste-kortets bildeslot, delt opp i Listens egne oppskrifter. Rutenettet
   skrives inline av antallet (se `ft_liste_collage()`); her står det som ikke
   avhenger av tallet.
   ───────────────────────────────────────────────────────────────────────── */

.ft-listekollasj {
	display: grid;
	/* 2px: en hvit fuge mellom cellene, en optisk detalj og ikke et avstandssteg. */
	gap: 2px;
	background: var(--wp--preset--color--lys-blaa);
}

.ft-listekollasj__celle {
	position: relative;
	overflow: hidden;

	/*
	 * En celle uten utvalgt bilde er den samme `lys-blaa` grunnen en tom slot er. Ingen tekst, ingen
	 * ramme: en oppskrift uten bilde er en helt vanlig tilstand i et arkiv på ~2 270.
	 */
	background: var(--wp--preset--color--lys-blaa);
}

.ft-listekollasj__celle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--overgang--myk);
}

/* Hevingen og bildezoomen er kortets egne (kort.css); kollasjen låner dem for alle cellene. */
.ft-kort:hover .ft-listekollasj__celle img {
	transform: scale(1.05);
}

/* ─────────────────────────  KORTMENYEN  ────────────────────────────────────
   Det tredje hjørnet: speilvendt av hjertets 36px øverst til venstre på et
   oppskriftskort, i samme størrelse og samme radius. Se #121s designrettelse.
   ───────────────────────────────────────────────────────────────────────── */

.ft-listemeny {
	position: absolute;
	z-index: var(--wp--custom--lag--flate);
	/* 12px: kortkantens avstand, den samme hjertet har. */
	top: 12px;
	right: 12px;
}

.ft-listemeny__knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 36px: hjertets trykkflate, speilvendt. */
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--rund);
	background: color-mix(in srgb, var(--wp--preset--color--hvit) 90%, transparent);
	cursor: pointer;

	/* Trekanten nettleseren tegner på en `<summary>` hører ikke til en ikonknapp. */
	list-style: none;
	transition: transform var(--wp--custom--overgang--rask) ease, background var(--wp--custom--overgang--rask) ease;
}

.ft-listemeny__knapp::-webkit-details-marker {
	display: none;
}

.ft-listemeny__knapp:hover,
.ft-listemeny__knapp:focus-visible {
	background: var(--wp--preset--color--hvit);
	transform: scale(1.08);
}

.ft-listemeny__ikon {
	/* 18px: glyfen inne i den 36px trykkflaten, som hjertets. */
	width: 18px;
	height: 18px;
	fill: var(--wp--preset--color--tekst);
	stroke: none;
}

.ft-listemeny__innhold {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--xxxs));
	right: 0;
	z-index: var(--wp--custom--lag--panel);
	display: flex;
	flex-direction: column;
	/* 11rem: bredt nok til «Gi nytt navn» på en linje, smalt nok til å ligge inne på et 20em-kort. */
	min-width: 11rem;
	padding: var(--wp--preset--spacing--xxxs);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	box-shadow: var(--wp--custom--skygge--heving);
}

.ft-listemeny__valg {
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	background: transparent;
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-align: left;
	cursor: pointer;
}

.ft-listemeny__valg:hover,
.ft-listemeny__valg:focus-visible {
	background: var(--wp--preset--color--lys-blaa);
}

.ft-listemeny__valg--slett {
	color: var(--wp--preset--color--roed);
}

/* ─────────────────────────  «NY LISTE»  ────────────────────────────────────
   En **fylt** `lys-blaa` flis, aldri en stiplet ramme: temaet har ingen
   stiplede kanter noe sted (#121s tredje designrettelse). Taket er den samme
   flisa uten trykkflate — en avskrudd affordanse som nevner rådet.
   ───────────────────────────────────────────────────────────────────────── */

.ft-nyliste {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xxs);
	width: 100%;
	height: 100%;
	/* 12rem: høyden et Liste-kort har uten å måtte kjenne kortets egen 4:3-slot. */
	min-height: 12rem;
	margin: 0;
	padding: var(--wp--preset--spacing--s);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--lys-blaa);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-align: center;
	cursor: pointer;
	transition: transform var(--wp--custom--overgang--myk), box-shadow var(--wp--custom--overgang--myk);
}

.ft-nyliste:hover,
.ft-nyliste:focus-visible {
	/* 4px: kortets eget dytt oppover. */
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--skygge--heving);
}

.ft-nyliste__plus {
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1;
}

.ft-nyliste__tekst {
	font-weight: 600;
}

.ft-nyliste--tak {
	color: var(--wp--preset--color--tekst-svak);
	cursor: default;
}

.ft-nyliste--tak:hover {
	transform: none;
	box-shadow: none;
}

.ft-nyliste__rad {
	display: block;
	margin-top: var(--wp--preset--spacing--xxxs);
}

/* ─────────────────────────  SKJEMAENE  ─────────────────────────────────────
   Klonet fra en `<template>` serveren skrev (ADR-0014 på klienten). Ett
   utseende for både navnefeltet og slettebekreftelsen: de står på samme
   plass og gjør samme slags ting, og to utseender ville vært to former for en
   dialog nettstedet bare har én av.
   ───────────────────────────────────────────────────────────────────────── */

/*
 * Skjemadialogen er rammeløs: boksen — grunnen, skyggen, hjørnene — er `.ft-listeskjema`s egen, så
 * skjemaet ser likt ut om en nettleser en dag skulle tegne det utenfor en dialog. Bredden står her,
 * fordi den er dialogens plass på skjermen og ikke skjemaets form.
 */
.ft-listedialog {
	width: min(24rem, calc(100vw - 2 * var(--wp--custom--sideinnrykk)));
	padding: 0;
	border: none;
	background: none;
}

.ft-listedialog::backdrop {
	background: rgb(0 0 0 / 40%);
}

/*
 * Reserven for nettlesere uten `showModal()`: modulen setter `open`-attributtet i stedet, og uten
 * denne regelen ville dialogen stått i dokumentflyten nederst på `<body>`, der den ble hengt.
 */
.ft-listedialog[open] {
	position: fixed;
	z-index: var(--wp--custom--lag--modal);
	inset: 0;
	margin: auto;
	height: fit-content;
}

.ft-listeskjema {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	padding: var(--wp--preset--spacing--s);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	box-shadow: var(--wp--custom--skygge--heving);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-align: left;
}

.ft-listeskjema__etikett {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxxs);
	font-family: var(--wp--preset--font-family--detalj);
	font-weight: 600;
}

.ft-listeskjema__felt {
	padding: var(--wp--preset--spacing--xxs);
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);

	/*
	 * 1rem: under 16px zoomer iOS Safari inn på fokus, og en flate som hopper når leseren skal
	 * skrive et listenavn er en flate hun må finne igjen etterpå.
	 */
	font-size: 1rem;
}

.ft-listeskjema__spor {
	margin: 0;
}

.ft-listeskjema__feil {
	margin: 0;
	color: var(--wp--preset--color--roed);
}

.ft-listeskjema__knapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs);
}

/* ─────────────────────────  LISTEVELGEREN  ─────────────────────────────────
   Avkryssingsboksene ved siden av hjertet på en oppskriftsside. Formen er
   dagvelgerens — den ligger under pilla si, ikke over sida — fordi å legge en
   oppskrift i en liste ikke skal ta over siden.
   ───────────────────────────────────────────────────────────────────────── */

.ft-listevelger {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--xxs));
	left: 0;
	z-index: var(--wp--custom--lag--panel);
	/* 15rem: bredt nok til et listenavn på en linje. */
	min-width: 15rem;
	/* 60vh: en leser med 20 lister skal ikke skrolle sida for å nå «Ny liste». */
	max-height: 60vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	box-shadow: var(--wp--custom--skygge--heving);
	text-align: left;
}

.ft-listevelger__tittel {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	color: var(--wp--preset--color--tekst-svak);
}

.ft-listevelger__lister {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxxs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-listevelger__valg {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	padding: var(--wp--preset--spacing--xxs);
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	cursor: pointer;
}

.ft-listevelger__valg:hover {
	background: var(--wp--preset--color--lys-blaa);
}

.ft-listevelger__boks {
	/* 1.15rem: en trykkflate paa en boks, ikke nettleserens 13px. */
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--roed);
}

.ft-listevelger__ny {
	width: 100%;
	margin-top: var(--wp--preset--spacing--xxs);
	padding: var(--wp--preset--spacing--xxs);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--lys-blaa);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	cursor: pointer;
}

.ft-listevelger__ny:hover,
.ft-listevelger__ny:focus-visible {
	background: var(--wp--preset--color--gul);
}

.ft-listevelger__tak {
	margin: var(--wp--preset--spacing--xxs) 0 0;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	color: var(--wp--preset--color--tekst-svak);
}

/* En leser som har bedt om mindre bevegelse, får flisa og kollasjen uten heving og zoom. */
@media (prefers-reduced-motion: reduce) {
	.ft-nyliste,
	.ft-listekollasj__celle img,
	.ft-listemeny__knapp {
		transition: none;
	}

	.ft-nyliste:hover,
	.ft-listemeny__knapp:hover {
		transform: none;
	}

	.ft-kort:hover .ft-listekollasj__celle img {
		transform: none;
	}
}

/*
 * Sjevronpilla ved siden av «Lagre», som åpner velgeren.
 *
 * Modifikatoren står her og ikke i `recipe-hero/style.scss` av `dagvelger.css`' presedens: den fila
 * eier alt `.ft-piller__velgerfelt`, som også er en heroklasse — en velger og knappen som åpner den er
 * én ting, og de to hører til den fila som eier velgeren.
 *
 * Bare smalere: den arver hvitt, kanten, radiusen, skyggen, høyden og hover-en fra `.ft-pille`,
 * siden en sjevron ved siden av «Lagre» er den samme pilla uten ord i.
 *
 * **`min-inline-size: 0` er det som gjør «bare smalere» sant.** `.ft-pille` fikk prototypens
 * minstebredde på 140px, og en sjevron er ordløs — uten dette blir knappen med ett tegn i like bred
 * som «Handleliste», og velgerfeltet dobbelt så bredt som pilla det henger på. Den er en *bredde*,
 * ikke en form, og derfor er det denne fila som må si det.
 *
 * To klasser og ikke én: `.ft-pille` står i et blokkstilark og denne i et temastilark, og hvilket av
 * de to som lastes sist er ikke noe denne fila kan vite. På én klasse hver avgjør rekkefølgen.
 */
.ft-pille.ft-pille--sjevron {
	padding-inline: 0.9em;
	min-inline-size: 0;
	/*
	 * `flex: 0 0 auto` er den andre halvdelen av «bare smalere», og den gjelder bare på smalt band:
	 * der får `.ft-piller .ft-pille` en `flex: 1` for å fylle sin halvdel av 2×2-rutenettet, og *to*
	 * piller i «Lagre»-cellen delte den likt — målt til 81/83px, altså en ordløs sjevron like bred
	 * som ordet ved siden av. Pilla med ordet i tar resten; sjevronen tar det den trenger.
	 */
	flex: 0 0 auto;
}

/*
 * «Lagre» er én knappegruppe: et trykk lagrer, sjevronen ved siden av velger hvor. Som to separate
 * piller leste raden som om oppskriften kunne lagres på to måter. Formen flytter derfor ut på gruppa —
 * den ytre boksen eier hvitfargen, radiusen, skyggen, høyden og den røde ringen, og de to knappene er
 * segmenter inni med en hårstrek mellom.
 *
 * Fire ting er lette å gjøre feil:
 *
 *  - **Gruppa er et eget element inne i `.ft-piller__velgerfelt`, ikke feltet selv.** Løftet er en
 *    `transform`, som gjør elementet til en stablingskontekst — lagt på feltet fanger den
 *    listevelgerens `z-index: 200` inne i seg, og panelet havner bak bandet under. Feltet
 *    posisjonerer, gruppa løfter, og de to må derfor være to elementer.
 *  - **Høyden må stå på gruppa, ikke på segmentene.** `.ft-pille` er `box-sizing: border-box`, så
 *    beholdt inne i en gruppe med egen 1px kant ble kontrollen 44px mot de andre pillenes 42.
 *  - **Ingen `overflow: hidden`**, hvor fristende det enn er for å klippe segmenthjørnene: velgeren er
 *    `position: absolute` i feltet rundt, og et klipp her ville tatt den med seg.
 *  - **Sjevronen er ikke `:last-child`.** Skjemaene velgeren kloner fra står etter den, så hjørnene på
 *    høyre side må stå på klassen.
 */

.ft-knappegruppe {
	display: inline-flex;
	/*
	 * Ingen `align-items` her, og det er ikke en glemt linje: `stretch` er standard, og det er den som
	 * gir segmentene full høyde. Med `center` ble de 15px — glyfens egen høyde — så gruppa så
	 * uforandret ut mens trykkflata krympet til en fjerdedel. `.ft-pille` sentrerer sitt *innhold*
	 * selv; gruppa skal bare strekke knappene.
	 */
	/* Fyller cellen sin på smalt band, der feltet strekkes til halve pilleraden. */
	flex: 1;
	/* 2.625rem/8.75rem: pillas egen høyde og minstebredde, se recipe-hero/style.scss. */
	block-size: 2.625rem;
	min-inline-size: 8.75rem;
	background: var(--wp--preset--color--hvit);
	/* 1px: den samme gjennomsiktige ringen pilla har — her farger den aktive tilstanden gruppa. */
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pille);
	box-shadow: var(--wp--custom--skygge--pille);
	transition:
		transform var(--wp--custom--overgang--rask) ease,
		box-shadow var(--wp--custom--overgang--rask) ease,
		border-color var(--wp--custom--overgang--rask) ease;
}

/* Segmentene gir fra seg hele sin egen form til gruppa over. */
.ft-knappegruppe .ft-pille {
	block-size: auto;
	min-inline-size: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Ordet tar resten av gruppa når sjevronen har fått sitt. */
.ft-knappegruppe .ft-pille:first-child {
	flex: 1;
	border-start-start-radius: var(--wp--custom--radius--pille);
	border-end-start-radius: var(--wp--custom--radius--pille);
}

.ft-knappegruppe .ft-pille--sjevron {
	border-inline-start: var(--wp--custom--linje);
	border-start-end-radius: var(--wp--custom--radius--pille);
	border-end-end-radius: var(--wp--custom--radius--pille);
}

/*
 * Løftet er gruppas, tonen er segmentets, og delingen er hele poenget: gruppa er én fysisk gjenstand
 * og løfter seg i ett, men de to halvdelene gjør to forskjellige ting, så den du står på må si det.
 * `lys-blaa` er tonen pilla hadde som *hover* før den ble målt mot prototypen — feil som hele pillas
 * tilbakemelding, riktig som «denne halvdelen treffer du».
 */
.ft-knappegruppe:has(.ft-pille:hover) {
	/* 1px: prototypens eget dytt oppover, flyttet fra pilla til gruppa. */
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--skygge--pille-heving);
}

.ft-knappegruppe .ft-pille:hover {
	transform: none;
	background: var(--wp--preset--color--lys-blaa);
}

/*
 * Den røde ringen står på gruppa, siden gruppa er formen: `aria-pressed` blir liggende på
 * «Lagre»-segmentet, der `lesertilstand.js` setter den, og `:has()` flytter bare tegningen utover.
 * Hjertet fylles fortsatt av sin egen regel i recipe-hero/style.scss.
 */
.ft-knappegruppe:has(.ft-pille[aria-pressed="true"]) {
	border-color: var(--wp--preset--color--roed);
}

/* Samme deling som ellers: den som har bedt om mindre bevegelse mister løftet, ikke skyggen. */
@media (prefers-reduced-motion: reduce) {
	.ft-knappegruppe:has(.ft-pille:hover) {
		transform: none;
	}
}