/*
 * calculator.css — ketoarab2026/keto-calculator (flagship block).
 *
 * The most advanced keto macro calculator: a 2-column layout (input form +
 * dark result panel) that collapses to a single stacked column on phones.
 * Everything scoped under .ka-kcalc; all colors via theme.json CSS variables
 * so the 6 color modes recolor it, except the three macro brand colors
 * (fat / protein / carb) exposed as --ka-kc-* custom props. RTL logical
 * properties only. Mobile-first, fully usable + readable at 390px.
 *
 * Visual language matches _design/site-mockup.html [data-page="calc"] and
 * reuses .ka-eyebrow / .ka-btn / .ka-panel from style.css.
 */

.ka-kcalc {
	/* macro brand colors (fixed — NOT themed) */
	--ka-kc-fat: #557019;
	--ka-kc-protein: #C0533A;
	--ka-kc-carb: #E0992B;
	/* translucent surfaces on the dark panel */
	--ka-kc-panel-fill: rgba( 255, 255, 255, 0.06 );
	--ka-kc-panel-fill-2: rgba( 255, 255, 255, 0.09 );
	--ka-kc-panel-border: rgba( 255, 255, 255, 0.12 );
	--ka-kc-panel-border-soft: rgba( 255, 255, 255, 0.08 );

	/* consistent 8px-based spacing rhythm */
	--ka-kc-s1: 0.5rem;   /* 8px  */
	--ka-kc-s2: 0.75rem;  /* 12px */
	--ka-kc-s3: 1rem;     /* 16px */
	--ka-kc-s4: 1.5rem;   /* 24px */
	--ka-kc-s5: 2rem;     /* 32px */

	/* shared transition timing (premium, restrained) */
	--ka-kc-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--ka-kc-dur: 0.18s;

	container-type: inline-size;
	font-family: var( --wp--preset--font-family--sans );
}

/* Every calculator element sizes with border-box so a width:100% input never
   overflows its grid cell — this was the cause of boxes spilling past the frame
   and overlapping. */
.ka-kcalc,
.ka-kcalc *,
.ka-kcalc *::before,
.ka-kcalc *::after {
	box-sizing: border-box;
}

/* Visually-hidden but available to assistive tech (e.g. the meals <caption>). */
.ka-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ============================ LAYOUT ============================ */
.ka-kcalc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 1.25rem, 3vw, 2rem );
	align-items: start;
}

/* ============================ FORM SIDE ============================ */
.ka-kcalc-form {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--lg );
	padding: clamp( 1.25rem, 3vw, 1.75rem );
	box-shadow: var( --wp--custom--shadow--soft );
}

.ka-kcalc-form__head {
	margin-bottom: var( --ka-kc-s4 );
}
.ka-kcalc-form__title {
	font-family: var( --wp--preset--font-family--display );
	color: var( --wp--preset--color--heading );
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: var( --ka-kc-s2 ) 0 0;
}

.ka-field {
	margin-bottom: var( --ka-kc-s3 );
}
.ka-field:last-child {
	margin-bottom: 0;
}
/* the `hidden` attribute must always hide, even when an author display rule
   (e.g. .ka-field--split { display:grid }) would otherwise override the UA rule */
.ka-kcalc [hidden] { display: none !important; }

/* ---- paired field rows (2-up to cut form height) ---- */
.ka-kcalc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --ka-kc-s2 );
	margin-bottom: var( --ka-kc-s3 );
	align-items: start;
}
/* grid children must be allowed to shrink so the inputs stay inside their cell */
.ka-kcalc-row .ka-field {
	margin-bottom: 0;
	min-width: 0;
}
/* height cell hosts both the metric (cm) and imperial (ft+in) variants;
   only the active one is visible via the [hidden] logic above */
.ka-field--height > [data-height-metric],
.ka-field--height > [data-height-imperial] {
	display: block;
}
/* collapse paired rows to a single column on narrow viewports */
@media ( max-width: 520px ) {
	.ka-kcalc-row {
		grid-template-columns: 1fr;
		gap: var( --ka-kc-s3 );
	}
	/* stacked: labels return to natural height (no need to reserve a band) */
	.ka-kcalc-row .ka-field__label {
		min-height: 0;
	}
}
.ka-field__label {
	display: block;
	font-weight: 600;
	color: var( --wp--preset--color--heading );
	margin-bottom: var( --ka-kc-s1 );
	font-size: 0.9rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.ka-field__hint {
	margin: var( --ka-kc-s1 ) 0 0;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var( --wp--preset--color--contrast-muted );
}
/* hint that belongs to a paired row sits just under it */
.ka-field__hint--row {
	margin-top: calc( var( --ka-kc-s1 ) * -0.5 );
	margin-bottom: var( --ka-kc-s3 );
}

/* text + number inputs and selects */
.ka-kcalc-form input[ type="number" ],
.ka-kcalc-form select {
	width: 100%;
	min-height: 44px;
	padding: 0.7rem 1rem;
	border-radius: var( --wp--custom--radius--md );
	border: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 1rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		box-shadow var( --ka-kc-dur ) var( --ka-kc-ease ),
		background-color var( --ka-kc-dur ) var( --ka-kc-ease );
}
.ka-kcalc-form input[ type="number" ]:hover,
.ka-kcalc-form select:hover {
	border-color: var( --wp--preset--color--accent );
}
.ka-kcalc-form input[ type="number" ]:focus,
.ka-kcalc-form select:focus {
	outline: none;
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 3px var( --wp--preset--color--primary-soft );
}
.ka-kcalc-form input[ type="number" ]::placeholder {
	color: var( --wp--preset--color--contrast-muted );
	opacity: 0.7;
}

/* select with a logical-end chevron */
.ka-select-wrap {
	position: relative;
}
.ka-select-wrap::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 1rem;
	width: 0.6rem;
	height: 0.6rem;
	border-inline-end: 2px solid var( --wp--preset--color--contrast-muted );
	border-block-end: 2px solid var( --wp--preset--color--contrast-muted );
	transform: translateY( -65% ) rotate( 45deg );
	pointer-events: none;
}
.ka-select-wrap select {
	padding-inline-end: 2.4rem;
}

/* two inputs side by side (ft + in) */
.ka-field--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --ka-kc-s2 );
	align-items: end;
}

/* ---- segmented toggles ---- */
.ka-seg-row {
	display: flex;
	gap: var( --ka-kc-s1 );
}
.ka-seg-row button {
	flex: 1;
	min-height: 44px;
	padding: 0.6rem 0.5rem;
	border-radius: var( --wp--custom--radius--md );
	border: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		color var( --ka-kc-dur ) var( --ka-kc-ease ),
		border-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		box-shadow var( --ka-kc-dur ) var( --ka-kc-ease );
}
.ka-seg-row button:hover {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--preset--color--surface );
}
.ka-seg-row button:focus-visible {
	outline: none;
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 3px var( --wp--preset--color--primary-soft );
}
.ka-seg-row button.is-active {
	background: var( --wp--preset--color--primary );
	color: #fff;
	border-color: var( --wp--preset--color--primary );
	box-shadow: var( --wp--custom--shadow--soft );
}
.ka-seg-row button.is-active:hover {
	background: var( --wp--preset--color--primary );
}

/* ---- range sliders ---- */
.ka-slider-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* keep the value pill next to its label, not floating far away */
	gap: 0.6rem;
	margin-bottom: 0.4rem;
	min-width: 0;
}
.ka-slider-head .ka-field__label {
	margin-bottom: 0;
	min-width: 0;                  /* allow long Arabic labels to shrink instead of widening the column */
	overflow-wrap: anywhere;
}
.ka-slider-head .ka-slider-val {
	flex: none;                    /* the pill keeps its size; the label is what flexes */
}
.ka-slider-val {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var( --wp--preset--color--primary-strong );
	font-variant-numeric: tabular-nums;
	background: var( --wp--preset--color--primary-soft );
	padding: 0.2rem 0.7rem;
	border-radius: var( --wp--custom--radius--pill );
	min-width: 3.2rem;
	text-align: center;
	transition: background-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		color var( --ka-kc-dur ) var( --ka-kc-ease );
}

.ka-range {
	-webkit-appearance: none;
	appearance: none;
	width: calc( 100% - 16px );
	/* Deterministic RTL slider direction across browsers. */
	direction: rtl;
	/* Effective tappable area >=44px: an 8px visible track plus transparent
	   vertical padding. The track fill + border are clipped to the content box
	   so the visible track stays 8px while the click/touch target is ~44px. */
	box-sizing: content-box;
	height: 8px;
	padding-block: 18px;
	padding-inline: 0;   /* the slider inherited 16px side padding from the input rule; with content-box that made it 32px wider than its cell and it spilled past the form's left edge (overflow on desktop + mobile) */
	margin-block: 0;
	margin-inline: 8px;   /* keep the round thumb (and its active ring) clear of the form's edge at the track ends */
	/* Value-proportional fill: primary from the RTL start (right) up to the
	   thumb, surface-2 for the remainder. `to left` paints right→left, i.e. the
	   start→thumb direction under direction:rtl. view.js sets --ka-fill (0–100%);
	   Firefox uses ::-moz-range-progress instead (its track would mask this). */
	--ka-fill: 0%;
	background: linear-gradient(
		to left,
		var( --wp--preset--color--primary ) 0 var( --ka-fill ),
		var( --wp--preset--color--surface-2 ) var( --ka-fill ) 100%
	);
	background-clip: content-box;
	border-radius: var( --wp--custom--radius--pill );
	border: none;
	cursor: pointer;
}
.ka-range:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
}
/* WebKit thumb */
.ka-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* primary-strong is the high-contrast tone in every mode (dark olive/clay/navy
	   on light tracks; light lime/coral/sky on dark tracks) so the handle never
	   vanishes — --primary alone failed contrast on the 3 dark surfaces. */
	background: var( --wp--preset--color--primary-strong );
	border: 3px solid var( --wp--preset--color--surface );
	box-shadow: var( --wp--custom--shadow--soft );
	cursor: pointer;
	transition: transform var( --ka-kc-dur ) var( --ka-kc-ease ),
		box-shadow var( --ka-kc-dur ) var( --ka-kc-ease );
}
.ka-range:hover::-webkit-slider-thumb {
	transform: scale( 1.06 );
}
.ka-range:active::-webkit-slider-thumb {
	transform: scale( 1.14 );
	box-shadow: 0 0 0 6px var( --wp--preset--color--primary-soft );
}
/* Firefox thumb + track */
.ka-range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* primary-strong is the high-contrast tone in every mode (dark olive/clay/navy
	   on light tracks; light lime/coral/sky on dark tracks) so the handle never
	   vanishes — --primary alone failed contrast on the 3 dark surfaces. */
	background: var( --wp--preset--color--primary-strong );
	border: 3px solid var( --wp--preset--color--surface );
	box-shadow: var( --wp--custom--shadow--soft );
	cursor: pointer;
	transition: transform var( --ka-kc-dur ) var( --ka-kc-ease ),
		box-shadow var( --ka-kc-dur ) var( --ka-kc-ease );
}
.ka-range:hover::-moz-range-thumb {
	transform: scale( 1.06 );
}
.ka-range:active::-moz-range-thumb {
	transform: scale( 1.14 );
	box-shadow: 0 0 0 6px var( --wp--preset--color--primary-soft );
}
.ka-range::-moz-range-track {
	height: 8px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--surface-2 );
}
/* Firefox paints the filled portion natively (the input-background gradient is
   masked by the track above), RTL-aware via direction:rtl. */
.ka-range::-moz-range-progress {
	height: 8px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--primary );
}

/* protein quick presets */
.ka-presets {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ka-kc-s1 );
	margin-top: var( --ka-kc-s2 );
}
.ka-presets button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	border-radius: var( --wp--custom--radius--pill );
	border: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--surface-2 );
	color: var( --wp--preset--color--contrast-muted );
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 600;
	font-size: 0.82rem;
	cursor: pointer;
	transition: background-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		color var( --ka-kc-dur ) var( --ka-kc-ease ),
		border-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		box-shadow var( --ka-kc-dur ) var( --ka-kc-ease );
}
.ka-presets button:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}
.ka-presets button:focus-visible {
	outline: none;
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 3px var( --wp--preset--color--primary-soft );
}
.ka-presets button.is-active {
	background: var( --wp--preset--color--primary-soft );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary-strong );
}

/* full-width calc button */
.ka-kcalc-go {
	width: 100%;
	margin-top: var( --ka-kc-s2 );
}

/* ============================ RESULT SIDE ============================ */
.ka-kcalc-out {
	border-radius: var( --wp--custom--radius--lg );
	padding: clamp( 1.1rem, 2.6vw, 1.6rem );
	box-shadow: var( --wp--custom--shadow--strong );
	position: sticky;
	top: 96px;
}

.ka-kcalc-out__top {
	text-align: center;
}
.ka-kcalc-out__lbl {
	color: var( --wp--preset--color--panel-muted );
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.ka-kcalc-out__big {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 800;
	font-size: clamp( 2.3rem, 6cqi, 2.9rem );
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--accent );
	font-variant-numeric: tabular-nums;
	margin: 0.3rem 0 0.2rem;
}
.ka-mc__pct { display: none; } /* macro % hidden on the cards — already shown in the donut + legend */
.ka-kcalc-out__formula {
	display: none; /* equation badge removed per design */
	margin-top: var( --ka-kc-s2 );
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var( --wp--preset--color--panel-text );
	background: var( --ka-kc-panel-fill-2 );
	border: 1px solid var( --ka-kc-panel-border );
	padding: 0.3rem 0.85rem;
	border-radius: var( --wp--custom--radius--pill );
	transition: background-color var( --ka-kc-dur ) var( --ka-kc-ease );
}

/* ---- donut + legend ---- */
.ka-kcalc-donutrow {
	display: flex;
	align-items: center;
	gap: clamp( 1rem, 4cqi, 1.8rem );
	margin: var( --ka-kc-s4 ) 0 0;
	padding-block: var( --ka-kc-s4 );
	border-block: 1px solid var( --ka-kc-panel-border-soft );
}
.ka-kcalc-donut {
	flex: none;
	width: clamp( 116px, 34cqi, 150px );
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	/* subtle depth so the ring reads as a distinct element on the panel */
	box-shadow: inset 0 0 0 1px var( --ka-kc-panel-border-soft );
	/* default ring so it draws before JS (≈70/25/5) */
	background: conic-gradient(
		var( --ka-kc-fat ) 0 70%,
		var( --ka-kc-protein ) 70% 95%,
		var( --ka-kc-carb ) 95% 100%
	);
}
.ka-kcalc-donut__hole {
	width: 64%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var( --wp--preset--color--panel );
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1.1;
}
.ka-kcalc-donut__hole b {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.25rem, 6cqi, 1.65rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--panel-text );
	font-variant-numeric: tabular-nums;
}
.ka-kcalc-donut__hole span {
	margin-top: 0.1rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var( --wp--preset--color--panel-muted );
}

.ka-kcalc-legend {
	flex: 1;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --ka-kc-s2 );
}
.ka-kcalc-legend li {
	display: flex;
	align-items: center;
	gap: var( --ka-kc-s2 );
	font-size: 0.9rem;
	color: var( --wp--preset--color--panel-muted );
}
.ka-kcalc-legend li b {
	margin-inline-start: auto;
	color: var( --wp--preset--color--panel-text );
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ka-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
}
.ka-dot--fat {
	background: var( --ka-kc-fat );
}
.ka-dot--protein {
	background: var( --ka-kc-protein );
}
.ka-dot--carb {
	background: var( --ka-kc-carb );
}

/* ---- macro cards ---- */
.ka-kcalc-out__macros {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --ka-kc-s2 );
	margin-top: var( --ka-kc-s3 );
}
.ka-mc {
	position: relative;
	min-width: 0;
	background: var( --ka-kc-panel-fill );
	border: 1px solid var( --ka-kc-panel-border );
	border-radius: var( --wp--custom--radius--md );
	padding: 0.7rem 0.55rem 0.6rem;
	text-align: center;
	overflow: hidden;
	transition: background-color var( --ka-kc-dur ) var( --ka-kc-ease ),
		border-color var( --ka-kc-dur ) var( --ka-kc-ease );
}
/* a slim colored accent bar pinned to the top edge — tasteful, not heavy */
.ka-mc::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var( --ka-mc-accent, transparent );
}
.ka-mc:hover {
	background: var( --ka-kc-panel-fill-2 );
}
.ka-mc--fat {
	--ka-mc-accent: var( --ka-kc-fat );
}
.ka-mc--protein {
	--ka-mc-accent: var( --ka-kc-protein );
}
.ka-mc--carb {
	--ka-mc-accent: var( --ka-kc-carb );
}
.ka-mc__name {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --wp--preset--color--panel-muted );
	margin-bottom: 0.15rem;
	line-height: 1.2;
}
.ka-mc__g {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 800;
	font-size: clamp( 1.3rem, 6.4cqi, 1.6rem );
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--panel-text );
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.ka-mc__g i {
	font-style: normal;
	font-size: 0.56em;
	font-weight: 600;
	margin-inline-start: 0.12rem;
	color: var( --wp--preset--color--panel-muted );
}
/* % · kcal — small, muted, single tight line under the grams */
.ka-mc__sub {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	line-height: 1.25;
	color: var( --wp--preset--color--panel-muted );
	font-variant-numeric: tabular-nums;
}

/* ---- infeasible-split notice ---- */
.ka-kcalc-out__warn {
	display: flex;
	align-items: flex-start;
	gap: var( --ka-kc-s2 );
	margin-top: var( --ka-kc-s3 );
	padding: 0.7rem 0.85rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
	color: var( --wp--preset--color--panel-text );
	background: var( --ka-kc-panel-fill-2 );
	border: 1px solid var( --ka-kc-panel-border );
	border-inline-start: 3px solid var( --ka-kc-carb );
	border-radius: var( --wp--custom--radius--md );
}
.ka-kcalc-out__warn svg {
	flex: none;
	margin-top: 0.1rem;
	color: var( --ka-kc-carb );
}

/* ---- stats row ---- */
.ka-kcalc-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --ka-kc-s1 );
	margin-top: var( --ka-kc-s2 );
}
.ka-kstat {
	background: var( --ka-kc-panel-fill );
	border-radius: var( --wp--custom--radius--md );
	padding: 0.7rem 0.4rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ka-kstat__lbl {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --wp--preset--color--panel-muted );
}
.ka-kstat__val {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--accent );
	line-height: 1.15;
	margin: 0.15rem 0 0.1rem;
	font-variant-numeric: tabular-nums;
}
.ka-kstat__unit {
	display: block;
	font-size: 0.66rem;
	color: var( --wp--preset--color--panel-muted );
}

/* ---- per-meal table ---- */
.ka-kcalc-meals {
	margin-top: var( --ka-kc-s4 );
	background: var( --ka-kc-panel-fill );
	border: 1px solid var( --ka-kc-panel-border );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --ka-kc-s2 ) var( --ka-kc-s3 ) 0.25rem;
}
.ka-kcalc-meals__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --ka-kc-s2 );
	margin-bottom: var( --ka-kc-s1 );
}
.ka-kcalc-meals__head h4 {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var( --wp--preset--color--panel-text );
}
.ka-kcalc-meals__head span {
	font-size: 0.74rem;
	color: var( --wp--preset--color--panel-muted );
}
.ka-kcalc-meals__scroll {
	overflow-x: auto;
}
.ka-kcalc-meals__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.ka-kcalc-meals__table th,
.ka-kcalc-meals__table td {
	padding: 0.5rem 0.35rem;
	text-align: center;
	font-size: 0.85rem;
	white-space: nowrap;
}
.ka-kcalc-meals__table thead th {
	color: var( --wp--preset--color--panel-muted );
	font-weight: 600;
	font-size: 0.74rem;
	letter-spacing: 0.01em;
	border-bottom: 1px solid var( --ka-kc-panel-border );
}
.ka-kcalc-meals__table tbody th[ scope="row" ] {
	text-align: start;
	color: var( --wp--preset--color--panel-text );
	font-weight: 600;
}
.ka-kcalc-meals__table tbody td {
	color: var( --wp--preset--color--panel-muted );
}
.ka-kcalc-meals__table tbody tr + tr th,
.ka-kcalc-meals__table tbody tr + tr td {
	border-top: 1px solid var( --ka-kc-panel-border-soft );
}
.ka-kcalc-meals__table i {
	font-style: normal;
	font-size: 0.78em;
	opacity: 0.8;
}

.ka-kcalc-out__note {
	margin: var( --ka-kc-s4 ) 0 0;
	font-size: 0.76rem;
	line-height: 1.55;
	color: var( --wp--preset--color--panel-muted );
	text-align: center;
}

/* ============================ RESPONSIVE ============================ */
/* container-query fallback to viewport: collapse to one column ≤880px */
@media ( max-width: 880px ) {
	.ka-kcalc__grid {
		grid-template-columns: 1fr;
	}
	.ka-kcalc-out {
		position: static;
	}
}

/* tighten the result internals on small phones (≤390px usable) */
@container ( max-width: 430px ) {
	.ka-kcalc-donutrow {
		flex-direction: column;
		text-align: center;
		gap: var( --ka-kc-s3 );
	}
	.ka-kcalc-legend {
		width: 100%;
	}
}
@media ( max-width: 430px ) {
	.ka-kcalc-stats {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --ka-kc-s1 );
	}
	.ka-kcalc-out__macros {
		gap: var( --ka-kc-s1 );
	}
	.ka-mc {
		padding: 0.6rem 0.4rem 0.5rem;
	}
	/* shrink the macro-card text so all three fit a narrow phone without clipping */
	.ka-mc__g { font-size: clamp( 1.05rem, 7cqi, 1.3rem ); }
	.ka-mc__name { font-size: 0.66rem; }
	.ka-mc__sub { font-size: 0.62rem; }
}

/* reduced motion — neutralise every transition/transform we introduced */
@media ( prefers-reduced-motion: reduce ) {
	.ka-kcalc-form input[ type="number" ],
	.ka-kcalc-form select,
	.ka-seg-row button,
	.ka-presets button,
	.ka-slider-val,
	.ka-kcalc-out__formula,
	.ka-mc,
	.ka-range::-webkit-slider-thumb,
	.ka-range::-moz-range-thumb {
		transition: none;
	}
	.ka-range:hover::-webkit-slider-thumb,
	.ka-range:active::-webkit-slider-thumb,
	.ka-range:hover::-moz-range-thumb,
	.ka-range:active::-moz-range-thumb {
		transform: none;
	}
}