/**
 * Handarbeitsrechner -- Frontend.
 *
 * Kein eigenes Farb- und Schriftbild: Farben, Schrift, Eckenradius und
 * Abstände kommen aus den theme.json-Variablen des aktiven Themes. Wählt
 * jemand eine andere Stilvariante, wandert der Rechner automatisch mit. Die
 * Rückfallwerte hinter jedem var() greifen nur in Themes, die die jeweilige
 * Variable nicht setzen.
 */

.digi-yarn {
	--digi-yarn-radius: var( --wp--custom--border-radius--standard, 4px );
	--digi-yarn-line: color-mix( in srgb, currentColor 18%, transparent );
	--digi-yarn-muted: var( --wp--custom--muted, color-mix( in srgb, currentColor 70%, transparent ) );
	--digi-yarn-gap: var( --wp--preset--spacing--x-small, 20px );

	container-type: inline-size;
}

.digi-yarn *,
.digi-yarn *::before,
.digi-yarn *::after {
	box-sizing: border-box;
}

.digi-yarn .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Einleitung
 * ---------------------------------------------------------------------- */

.digi-yarn__intro {
	margin-bottom: var( --wp--preset--spacing--small, 30px );
}

.digi-yarn__title {
	margin-top: 0;
	margin-bottom: 0.4em;
}

.digi-yarn__lead {
	margin: 0;
	max-width: 60ch;
}

/* -------------------------------------------------------------------------
 * Formular
 * ---------------------------------------------------------------------- */

.digi-yarn__form {
	display: grid;
	gap: var( --wp--preset--spacing--small, 30px );
	margin: 0;
}

.digi-yarn__section {
	margin: 0;
	padding: var( --digi-yarn-gap );
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn__legend {
	padding: 0 0.5em;
	margin-inline-start: -0.5em;
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	font-size: var( --wp--preset--font-size--small, 0.9em );
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.digi-yarn__field {
	display: grid;
	gap: 0.35em;
}

.digi-yarn__field + .digi-yarn__field {
	margin-top: var( --digi-yarn-gap );
}

.digi-yarn__field > label,
.digi-yarn__row-label {
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	font-size: var( --wp--preset--font-size--small, 0.9em );
}

.digi-yarn__hint {
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 0.85em );
	color: var( --digi-yarn-muted );
}

/* Steht -- anders als die übrigen Hinweise -- nicht in einem .digi-yarn__field
   mit eigenem Grid-Abstand, sondern direkt nach dem "Garn hinzufügen"-Knopf. */
.digi-yarn__add + .digi-yarn__hint {
	margin-top: 0.6em;
}

.digi-yarn__field--narrow .digi-yarn__input-group,
.digi-yarn__field--narrow > input {
	max-width: 14em;
}

/* Eingaben erben Schrift und Farbe vom Theme und bekommen hier nur
   Geometrie -- so bleiben Themes mit eigenen Formularstilen unangetastet. */
.digi-yarn input[type="text"],
.digi-yarn input[type="number"] {
	width: 100%;
	min-width: 0;
	padding: 0.6em 0.75em;
	font: inherit;
	color: inherit;
	background-color: transparent;
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn input:focus-visible {
	outline: var( --wp--custom--focus-ring--width, 2px ) solid currentColor;
	outline-offset: var( --wp--custom--focus-ring--offset, 2px );
}

.digi-yarn__input-group {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.digi-yarn__input-group input {
	flex: 1;
}

.digi-yarn__suffix {
	flex-shrink: 0;
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	color: var( --digi-yarn-muted );
}

/* -------------------------------------------------------------------------
 * Garnzeilen
 * ---------------------------------------------------------------------- */

.digi-yarn__rows {
	display: grid;
	gap: var( --digi-yarn-gap );
}

.digi-yarn__row {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1.2fr ) auto;
	gap: 0.75em;
	align-items: end;
}

.digi-yarn__row-field {
	display: grid;
	gap: 0.3em;
	min-width: 0;
}

/* Ab hier reicht die Breite für fünf Spalten nicht mehr: Bezeichnung volle
   Breite, die drei Zahlenfelder darunter nebeneinander. */
@container ( max-width: 640px ) {
	.digi-yarn__row {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) auto;
	}

	.digi-yarn__row-field--name {
		grid-column: 1 / -1;
	}
}

@container ( max-width: 380px ) {
	.digi-yarn__row {
		grid-template-columns: minmax( 0, 1fr ) auto;
	}

	.digi-yarn__row-field--num {
		grid-column: 1;
	}
}

.digi-yarn__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	font: inherit;
	font-size: 1.1em;
	line-height: 1;
	color: inherit;
	background: none;
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
	cursor: pointer;
	transition: background-color var( --wp--custom--transition--duration, 0.2s ) var( --wp--custom--transition--timing, ease-in-out );
}

.digi-yarn__remove:hover {
	background-color: var( --digi-yarn-line );
}

.digi-yarn__add {
	margin-top: var( --digi-yarn-gap );
	padding: 0.5em 1em;
	font: inherit;
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	font-size: var( --wp--preset--font-size--small, 0.9em );
	color: inherit;
	background: none;
	border: 1px dashed var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
	cursor: pointer;
}

.digi-yarn__add:hover {
	border-style: solid;
}

/* -------------------------------------------------------------------------
 * Ergebnis
 * ---------------------------------------------------------------------- */

.digi-yarn__result {
	margin-top: var( --wp--preset--spacing--small, 30px );
	padding: var( --wp--preset--spacing--small, 30px );
	text-align: center;
	color: var( --wp--custom--on-primary, var( --wp--preset--color--base, #fff ) );
	background-color: var( --wp--preset--color--primary, #121627 );
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn__result-label {
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 0.85em );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.75;
}

.digi-yarn__total {
	margin: 0.1em 0 0.2em;
	font-size: var( --wp--preset--font-size--xx-large, clamp( 2.5rem, 8vw, 4rem ) );
	font-weight: var( --wp--custom--font-weight--bold, 700 );
	line-height: var( --wp--custom--line-height--one, 1 );
	color: var( --wp--preset--color--accent, #7cf461 );
	overflow-wrap: anywhere;
}

.digi-yarn__verdict {
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 0.95em );
	opacity: 0.85;
	min-height: 1.5em;
}

.digi-yarn__chips {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.75em;
	margin: var( --digi-yarn-gap ) 0 0;
	padding: 0;
	list-style: none;
}

@container ( max-width: 420px ) {
	.digi-yarn__chips {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.digi-yarn__chip {
	display: grid;
	gap: 0.15em;
	padding: 0.75em 0.5em;
	background-color: color-mix( in srgb, currentColor 10%, transparent );
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn__chip-value {
	font-size: 1.35em;
	font-weight: var( --wp--custom--font-weight--bold, 700 );
	line-height: 1.1;
}

.digi-yarn__chip-label {
	font-size: 0.8em;
	opacity: 0.75;
	line-height: 1.3;
}

.digi-yarn__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: var( --digi-yarn-gap );
	padding: 0.4em 0.2em;
	font: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9em );
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

.digi-yarn__chevron {
	display: inline-block;
	transition: transform 0.15s;
}

.digi-yarn__toggle[aria-expanded="true"] .digi-yarn__chevron {
	transform: rotate( 180deg );
}

.digi-yarn__breakdown {
	margin-top: var( --digi-yarn-gap );
	text-align: start;
}

.digi-yarn__breakdown[hidden] {
	display: none;
}

.digi-yarn__breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 0.55em 0;
	border-bottom: 1px solid color-mix( in srgb, currentColor 20%, transparent );
}

.digi-yarn__breakdown-row:last-child {
	border-bottom: 0;
}

.digi-yarn__breakdown-row--sub {
	padding-inline-start: 1em;
	font-size: 0.92em;
	opacity: 0.8;
}

/* Zwischensumme "Material insgesamt": kräftigere Linien statt der dünnen
   Zeilentrenner, damit der Schnitt zwischen Garnzeilen und Zwischensumme --
   und zwischen Zwischensumme und Lohnzeile -- klarer zu lesen ist. */
.digi-yarn__breakdown-row--subtotal {
	margin-top: 0.2em;
	padding-top: 0.7em;
	border-top: 2px solid color-mix( in srgb, currentColor 45%, transparent );
	border-bottom: 2px solid color-mix( in srgb, currentColor 45%, transparent );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
}

.digi-yarn__breakdown-row--total {
	margin-top: 0.3em;
	padding-top: 0.8em;
	border-top: 2px solid currentColor;
	font-weight: var( --wp--custom--font-weight--bold, 700 );
	font-size: 1.1em;
}

/* Ohne das hier stünde vor jeder dickeren Trennlinie noch die dünne
   Standardlinie der Zeile davor -- zwei Striche dicht übereinander statt
   einem sauberen Schnitt. */
.digi-yarn__breakdown-row:has( + .digi-yarn__breakdown-row--subtotal ),
.digi-yarn__breakdown-row:has( + .digi-yarn__breakdown-row--total ) {
	border-bottom: 0;
}

.digi-yarn__breakdown-label {
	display: grid;
	gap: 0.1em;
}

.digi-yarn__breakdown-detail {
	font-size: 0.82em;
	opacity: 0.7;
}

.digi-yarn__breakdown-value {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Teilen
 * ---------------------------------------------------------------------- */

.digi-yarn__share {
	margin-top: var( --wp--preset--spacing--small, 30px );
	padding: var( --wp--preset--spacing--small, 30px );
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn__share[hidden] {
	display: none;
}

.digi-yarn__share-title {
	margin-top: 0;
	margin-bottom: 0.3em;
}

.digi-yarn__share-lead {
	margin: 0 0 var( --digi-yarn-gap );
	color: var( --digi-yarn-muted );
}

.digi-yarn__share-preview {
	max-width: 320px;
	margin: 0 auto var( --digi-yarn-gap );
}

.digi-yarn__card {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: var( --digi-yarn-radius );
}

.digi-yarn__card[hidden] {
	display: none;
}

.digi-yarn__share-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em;
	align-items: stretch;
}

.digi-yarn__share-actions button,
.digi-yarn__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6em 1.1em;
	font: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9em );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
	background: none;
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --wp--custom--button--radius, var( --digi-yarn-radius ) );
	cursor: pointer;
	transition: background-color var( --wp--custom--transition--duration, 0.2s ) var( --wp--custom--transition--timing, ease-in-out );
}

.digi-yarn__share-actions button:hover,
.digi-yarn__share-link:hover {
	background-color: var( --digi-yarn-line );
}

/* Der Teilen-Knopf ist der Haupteinstieg -- er hebt sich ab wie zuvor die
   Aktion, die tatsächlich etwas nach außen trug. Der Selektor braucht die
   Elternklasse, sonst gewinnt die Grundregel oben (eine Klasse plus Typ)
   gegen eine einzelne Klasse. */
.digi-yarn__share-actions .digi-yarn__share-toggle,
.digi-yarn__share-actions .digi-yarn__share-image {
	color: var( --wp--custom--on-accent, var( --wp--preset--color--contrast, #111 ) );
	background-color: var( --wp--preset--color--accent, #7cf461 );
	border-color: var( --wp--preset--color--accent, #7cf461 );
}

.digi-yarn__share-actions .digi-yarn__share-toggle:hover,
.digi-yarn__share-actions .digi-yarn__share-image:hover {
	background-color: color-mix( in srgb, var( --wp--preset--color--accent, #7cf461 ) 82%, currentColor );
}

/* Der Umschlag positioniert das Menü relativ zum Knopf, ohne den Fluss der
   übrigen Aktionen daneben zu stören. */
.digi-yarn__share-menu-wrap {
	position: relative;
	display: inline-flex;
}

.digi-yarn__share-menu {
	position: absolute;
	top: calc( 100% + 0.4em );
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 190px;
	padding: 0.35em;
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--contrast, #111 );
	border: 1px solid var( --digi-yarn-line );
	border-radius: var( --digi-yarn-radius );
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.2 );
}

.digi-yarn__share-menu[hidden] {
	display: none;
}

.digi-yarn__share-menu .digi-yarn__share-link {
	justify-content: flex-start;
	width: 100%;
	padding: 0.55em 0.7em;
	border: 0;
	border-radius: calc( var( --digi-yarn-radius ) - 2px );
}

.digi-yarn__share-status {
	margin: 0.8em 0 0;
	min-height: 1.4em;
	font-size: var( --wp--preset--font-size--small, 0.9em );
	color: var( --digi-yarn-muted );
}

/* Auf breiten Bildschirmen stehen Ergebnis und Teilen-Kasten nebeneinander --
   beide sind gleich wichtig, und zwei volle Zeilen wirken auf einem großen
   Bildschirm unnötig lang. Ein @media-Bruchpunkt statt @container, weil
   dieser das Wurzelelement selbst umstellt: ein Element kann seine eigene
   Größe nicht über den Container abfragen, den es für seine Kinder aufspannt. */
@media ( min-width: 700px ) {
	.digi-yarn {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: 0 var( --digi-yarn-gap );
		/* stretch (statt start): beide Kästen bekommen die Höhe der
		   höheren Spalte -- gleich hohe Boxen wirken als Paar, nicht wie
		   zwei zufällig nebeneinanderstehende Elemente. */
		align-items: stretch;
	}

	.digi-yarn__form {
		grid-column: 1 / -1;
	}

	.digi-yarn__result,
	.digi-yarn__share {
		margin-top: var( --wp--preset--spacing--small, 30px );
	}

	/* Bevor ein Ergebnis feststeht, ist der Teilen-Kasten ausgeblendet und
	   das Ergebnis bekommt die volle Breite statt einer leeren zweiten Spalte. */
	.digi-yarn__result:has( ~ .digi-yarn__share[hidden] ) {
		grid-column: 1 / -1;
	}
}