/*
 * FoodResso Nutrition & Label Calculator — front-end styles.
 * Everything is scoped under .frc so theme styles are not affected, and only
 * logical properties are used so the layout mirrors for right-to-left languages.
 */
.frc {
	--frc-ink: #17201d;
	--frc-muted: #56625e;
	--frc-line: #d6dedb;
	--frc-surface: #f4f7f5;
	--frc-paper: #ffffff;
	/* Brand tokens (overridden from Settings > Appearance). Names kept for compatibility. */
	--frc-green: #1c53c5;
	--frc-green-strong: #1949ad;
	--frc-green-soft: #e4eaf8;
	--frc-amber: #7a4d00;
	--frc-amber-soft: #fbf0d9;
	--frc-red: #a4231a;
	--frc-red-soft: #fbe6e4;
	--frc-blue: #1f4f7a;
	--frc-blue-soft: #e5eef7;
	--frc-radius: 10px;
	--frc-gap: 16px;

	color: var(--frc-ink);
	font-size: 16px;
	line-height: 1.5;
	max-inline-size: 1120px;
	margin-inline: auto;
	box-sizing: border-box;
}
.frc *,
.frc *::before,
.frc *::after { box-sizing: inherit; }

.frc-sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.frc-num { font-variant-numeric: tabular-nums; }

/* ---------- Boot ---------- */
.frc-boot { padding-block: 32px; color: var(--frc-muted); }

/* ---------- Header ---------- */
.frc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px var(--frc-gap);
	margin-block-end: 20px;
}
.frc-title { margin: 0; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01em; }
.frc-title:focus { outline: none; }
.frc-title:focus-visible { outline: 2px solid var(--frc-green); outline-offset: 4px; }
.frc-subtitle { margin: 4px 0 0; color: var(--frc-muted); font-size: 0.9375rem; }

.frc-mode {
	display: inline-flex;
	border: 1px solid var(--frc-line);
	border-radius: 999px;
	padding: 3px;
	background: var(--frc-paper);
}
.frc-mode__btn {
	border: 0;
	background: transparent;
	color: var(--frc-muted);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding-block: 6px;
	padding-inline: 14px;
	border-radius: 999px;
	cursor: pointer;
	min-block-size: 36px;
}
.frc-mode__btn.is-on { background: var(--frc-green); color: var(--frc-on-brand, #fff); }

/* ---------- Stepper ---------- */
.frc-stepper ol {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	counter-reset: none;
}
.frc-stepper__item { margin: 0; }
.frc-stepper__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: 100%;
	min-block-size: 44px;
	padding-block: 8px;
	padding-inline: 10px;
	border: 0;
	border-block-end: 3px solid var(--frc-line);
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	color: var(--frc-muted);
	text-align: start;
	cursor: pointer;
}
.frc-stepper__num {
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.frc-stepper__item.is-done .frc-stepper__btn { border-block-end-color: var(--frc-green-soft); color: var(--frc-ink); }
.frc-stepper__item.is-current .frc-stepper__btn { border-block-end-color: var(--frc-green); color: var(--frc-ink); font-weight: 700; }
.frc-stepper__item.is-current .frc-stepper__num { background: var(--frc-green); border-color: var(--frc-green); color: var(--frc-on-brand, #fff); }
.frc-stepper__item.is-later .frc-stepper__btn { cursor: default; opacity: 0.6; }

/* ---------- Cards and layout ---------- */
.frc-card {
	background: var(--frc-paper);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	padding: 20px;
	margin-block-end: var(--frc-gap);
	box-shadow: 0 2px 14px var(--frc-shadow, rgba(28, 83, 197, 0.16));
}
.frc-h2 { margin: 0 0 14px; font-size: 1.1875rem; line-height: 1.3; }
.frc-h3 { margin: 8px 0 4px; font-size: 1.0625rem; line-height: 1.3; }

.frc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px var(--frc-gap);
}
.frc-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.frc-field--wide { grid-column: 1 / -1; }
.frc-label { font-weight: 600; font-size: 0.9375rem; }
.frc-label--sm { font-size: 0.8125rem; font-weight: 600; color: var(--frc-muted); }
.frc-help { margin: 6px 0 0; color: var(--frc-muted); font-size: 0.875rem; }

.frc-input {
	font: inherit;
	color: var(--frc-ink);
	background: var(--frc-paper);
	border: 1px solid #9aa8a3;
	border-radius: 6px;
	padding-block: 8px;
	padding-inline: 10px;
	min-block-size: 44px;
	inline-size: 100%;
}
.frc-input--num { font-variant-numeric: tabular-nums; text-align: end; max-inline-size: 9rem; }
.frc-input--unit { max-inline-size: 5.5rem; }
.frc-input.is-invalid { border-color: var(--frc-red); background: var(--frc-red-soft); }

.frc :focus-visible {
	outline: 2px solid var(--frc-green);
	outline-offset: 2px;
}

.frc-fieldset { border: 0; margin: 18px 0 0; padding: 0; min-inline-size: 0; }
.frc-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.frc-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--frc-line);
	border-radius: 8px;
	padding-block: 8px;
	padding-inline: 12px;
	min-block-size: 44px;
	cursor: pointer;
}
.frc-choice.is-selected { border-color: var(--frc-green); background: var(--frc-green-soft); }

/* ---------- Method cards ---------- */
.frc-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.frc-method {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	padding: 16px;
	padding-inline-start: 44px;
	cursor: pointer;
}
.frc-method input { position: absolute; inset-inline-start: 16px; inset-block-start: 19px; margin: 0; }
.frc-method.is-selected { border-color: var(--frc-green); box-shadow: inset 0 0 0 1px var(--frc-green); background: var(--frc-green-soft); }
.frc-method.is-later { cursor: not-allowed; color: var(--frc-muted); background: var(--frc-surface); }
.frc-method__title { font-weight: 700; color: var(--frc-ink); }
.frc-method__text { font-size: 0.9375rem; }

/* ---------- Badges, notes, errors ---------- */
.frc-badge {
	display: inline-block;
	padding-block: 1px;
	padding-inline: 7px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	background: var(--frc-surface);
	color: var(--frc-muted);
}
.frc-badge--info { background: var(--frc-blue-soft); color: var(--frc-blue); }
.frc-badge--warn { background: var(--frc-amber-soft); color: var(--frc-amber); }
.frc-badge--custom { background: var(--frc-green-soft); color: var(--frc-green-strong); }

.frc-note {
	margin: 8px 0;
	padding: 8px 12px;
	border-inline-start: 3px solid var(--frc-blue);
	background: var(--frc-blue-soft);
	font-size: 0.875rem;
}
.frc-note--warn { border-inline-start-color: var(--frc-amber); background: var(--frc-amber-soft); }
.frc-error {
	margin: 8px 0;
	padding: 8px 12px;
	border-inline-start: 3px solid var(--frc-red);
	background: var(--frc-red-soft);
	color: var(--frc-red);
	font-size: 0.9375rem;
}
.frc-error ul { margin: 0; padding-inline-start: 18px; }
.frc-empty { color: var(--frc-muted); margin: 8px 0 16px; }

/* ---------- Buttons ---------- */
.frc-btn {
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	min-block-size: 44px;
	padding-block: 8px;
	padding-inline: 16px;
	border-radius: 8px;
	border: 1px solid #9aa8a3;
	background: var(--frc-paper);
	color: var(--frc-ink);
	cursor: pointer;
}
.frc-btn:hover { border-color: var(--frc-green); }
.frc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.frc-btn--primary { background: var(--frc-green); border-color: var(--frc-green); color: var(--frc-on-brand, #fff); }
.frc-btn--primary:hover { background: var(--frc-green-strong); border-color: var(--frc-green-strong); color: #fff; }

.frc-link-btn {
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	background: none;
	border: 0;
	padding: 6px 4px;
	min-block-size: 36px;
	color: var(--frc-green-strong);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.frc-link-btn--danger { color: var(--frc-red); }
.frc-icon-btn {
	font: inherit;
	inline-size: 36px;
	block-size: 36px;
	border: 1px solid var(--frc-line);
	border-radius: 6px;
	background: var(--frc-paper);
	cursor: pointer;
}
.frc-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Ingredients layout ---------- */
.frc-ingredients {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--frc-gap);
	align-items: start;
}
.frc-ingredients > .frc-sr { grid-column: 1 / -1; }
.frc-recipe__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.frc-recipe__filter { inline-size: min(100%, 240px); }
.frc-add { position: sticky; inset-block-start: 16px; }

.frc-lines { list-style: none; margin: 0; padding: 0; }
.frc-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"main qty pct"
		"stage stage stage"
		"actions actions actions"
		"extra extra extra";
	gap: 8px 14px;
	padding-block: 14px;
	border-block-end: 1px solid var(--frc-line);
}
.frc-line.is-replacing { background: var(--frc-amber-soft); box-shadow: 0 0 0 6px var(--frc-amber-soft); border-radius: 4px; }
.frc-line__main { grid-area: main; display: flex; gap: 10px; min-inline-size: 0; }
.frc-line__num {
	flex: none;
	inline-size: 24px;
	color: var(--frc-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding-block-start: 2px;
}
.frc-line__name { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.frc-line__title { font-weight: 600; overflow-wrap: anywhere; }
.frc-line__meta { font-size: 0.8125rem; color: var(--frc-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.frc-line__data { font-variant-numeric: tabular-nums; }
.frc-line__qty { grid-area: qty; display: flex; gap: 6px; align-items: center; }
.frc-line__pct { grid-area: pct; display: flex; flex-direction: column; align-items: flex-end; min-inline-size: 5.5rem; }
.frc-line__pct-label { font-size: 0.75rem; color: var(--frc-muted); }
.frc-line__pct .frc-num { font-weight: 700; }
.frc-line__mass { font-size: 0.75rem; color: var(--frc-muted); font-variant-numeric: tabular-nums; }
.frc-line__stage { grid-area: stage; display: flex; gap: 8px; align-items: center; max-inline-size: 360px; }
.frc-line__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.frc-line__error, .frc-line__warn { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; }
.frc-line__error { color: var(--frc-red); }
.frc-line__warn { color: var(--frc-amber); }

.frc-density {
	grid-column: 1 / -1;
	background: var(--frc-surface);
	border-radius: 8px;
	padding: 10px 12px;
}
.frc-density__why { margin: 0 0 8px; font-size: 0.8125rem; color: var(--frc-muted); }
.frc-density__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.frc-density__row .frc-input { inline-size: auto; flex: 1 1 140px; }
.frc-density__row .frc-input--num { flex: 0 0 7rem; }

/* ---------- Balance meter (signature element) ---------- */
.frc-balance { margin-block-start: 18px; }
.frc-balance__figures { display: flex; justify-content: space-between; gap: 16px; }
.frc-balance__label { display: block; font-size: 0.8125rem; color: var(--frc-muted); }
.frc-balance__value { display: block; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.frc-balance__figures > div:last-child { text-align: end; }
.frc-balance__track {
	position: relative;
	display: block;
	block-size: 10px;
	margin-block: 10px 6px;
	border-radius: 999px;
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	overflow: hidden;
}
.frc-balance__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: var(--frc-amber);
	transition: inline-size 0.25s ease;
}
.frc-balance.is-balanced .frc-balance__fill { background: var(--frc-green); }
.frc-balance__tick {
	position: absolute;
	inset-block: -3px;
	inset-inline-end: 0;
	inline-size: 2px;
	background: var(--frc-ink);
}
.frc-balance__status { margin: 0; font-size: 0.875rem; color: var(--frc-muted); }

/* ---------- Finder ---------- */
.frc-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--frc-line); margin-block-end: 14px; }
.frc-tab {
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	background: none;
	border: 0;
	border-block-end: 3px solid transparent;
	padding-block: 10px;
	padding-inline: 12px;
	min-block-size: 44px;
	color: var(--frc-muted);
	cursor: pointer;
	margin-block-end: -1px;
}
.frc-tab.is-active { color: var(--frc-ink); border-block-end-color: var(--frc-green); }

.frc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px; }
.frc-chip {
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	border: 1px solid var(--frc-line);
	background: var(--frc-paper);
	color: var(--frc-muted);
	border-radius: 999px;
	padding-block: 4px;
	padding-inline: 10px;
	min-block-size: 32px;
	cursor: pointer;
}
.frc-chip.is-on { background: var(--frc-green-soft); border-color: var(--frc-green); color: var(--frc-green-strong); }
.frc-finder__status { font-size: 0.8125rem; color: var(--frc-muted); min-block-size: 1.25em; }

.frc-results { list-style: none; margin: 8px 0; padding: 0; max-block-size: 480px; overflow-y: auto; }
.frc-result {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding-block: 10px;
	border-block-end: 1px solid var(--frc-line);
}
.frc-result__text { display: flex; flex-direction: column; min-inline-size: 0; }
.frc-result__title { font-weight: 600; overflow-wrap: anywhere; }
.frc-result__meta { font-size: 0.8125rem; color: var(--frc-muted); }
.frc-result .frc-btn { flex: none; min-block-size: 40px; font-size: 0.875rem; padding-inline: 12px; }

.frc-inspect .frc-btn--primary { margin-block: 10px; }
.frc-nutrients { display: grid; gap: 14px; }
.frc-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
.frc-table caption { text-align: start; font-weight: 700; padding-block: 6px; }
.frc-table th, .frc-table td { padding-block: 5px; padding-inline: 6px; border-block-end: 1px solid var(--frc-line); text-align: start; }
.frc-table thead th { font-size: 0.75rem; color: var(--frc-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.frc-table .frc-num { text-align: end; white-space: nowrap; }
.frc-table tr.is-missing th, .frc-table tr.is-missing td { color: var(--frc-muted); }

/* ---------- Custom ingredient form ---------- */
.frc-ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-block-start: 8px; }
.frc-nfield { display: flex; flex-direction: column; gap: 4px; }
.frc-nfield .frc-input--num { max-inline-size: none; }
.frc-details { margin-block: 14px; }
.frc-details summary { cursor: pointer; font-weight: 600; color: var(--frc-green-strong); min-block-size: 32px; }
.frc-custom .frc-btn--primary { margin-block-start: 12px; }

/* ---------- Nav and footer ---------- */
.frc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block: 8px 20px; }
.frc-nav__later { margin: 0; }
.frc-footer {
	border-block-start: 1px solid var(--frc-line);
	padding-block-start: 14px;
	font-size: 0.8125rem;
	color: var(--frc-muted);
}
.frc-footer p { margin: 0 0 8px; max-inline-size: 80ch; }
.frc-notice { padding: 12px; background: var(--frc-amber-soft); color: var(--frc-amber); border-radius: 8px; }

/* ---------- Phase 5: methods, batch, scaling ---------- */
.frc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.frc-unit { font-weight: 600; color: var(--frc-muted); }
.frc-flour {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	min-block-size: 36px;
	padding-inline-start: 6px;
	cursor: pointer;
}
.frc-line.is-flour .frc-line__title::after {
	content: "";
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: 8px;
	border-radius: 50%;
	background: var(--frc-green);
	vertical-align: middle;
}
.frc-figure { min-inline-size: 0; }
.frc-balance__figures { flex-wrap: wrap; }
.frc-balance__figures > .frc-figure:not(:first-child) { text-align: end; }
.frc-balance__track.is-over .frc-balance__fill { background: var(--frc-red); }
.frc-batch { margin-block-start: 14px; display: flex; flex-direction: column; gap: 6px; }
.frc-fieldset--tight { margin-block-start: 0; }
.frc-note__p { margin: 0 0 8px; }
.frc-flourpick {
	margin-block-start: 16px;
	padding: 14px 16px;
	border: 1px solid var(--frc-green);
	border-radius: var(--frc-radius);
	background: var(--frc-green-soft);
}
.frc-flourpick__list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.frc-flourpick__list li { display: flex; align-items: center; gap: 6px; min-block-size: 32px; }
.frc-scale { border-block-start: 1px solid var(--frc-line); padding-block-start: 12px; }
.frc-scale__body { display: flex; flex-direction: column; gap: 10px; margin-block-start: 8px; }

/* ---------- Phase 6: process & yield ---------- */
.frc-process { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--frc-gap); align-items: start; }
.frc-psummary { position: sticky; inset-block-start: 16px; }
.frc-loss { display: flex; flex-direction: column; gap: 10px; margin-block: 12px; }
.frc-loss__value { align-items: flex-end; }
.frc-loss__value .frc-field { flex: 1 1 200px; }
.frc-stages { list-style: none; margin: 16px 0 8px; padding: 0; counter-reset: frc-stage; }
.frc-stage {
	counter-increment: frc-stage;
	position: relative;
	padding-block: 12px;
	padding-inline-start: 36px;
	border-block-end: 1px solid var(--frc-line);
}
.frc-stage::before {
	content: counter(frc-stage);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 12px;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	display: grid;
	place-items: center;
	font-size: 0.75rem;
	font-weight: 700;
}
.frc-stage__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.frc-stage__name { font-weight: 700; }
.frc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.frc-facts dt { color: var(--frc-muted); font-size: 0.875rem; }
.frc-facts dd { margin: 0; font-weight: 700; text-align: end; }

/* ---------- Phase 7: results ---------- */
.frc-facts--wide { grid-template-columns: max-content 1fr; }
.frc-facts--wide dd { text-align: start; }
.frc-energy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.frc-energy__box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	background: var(--frc-surface);
}
.frc-table-wrap { overflow-x: auto; display: grid; gap: 18px; }
.frc-table--results { min-inline-size: 560px; }
.frc-table--results td, .frc-table--results th { vertical-align: top; }
.frc-table--results tr.is-partial th, .frc-table--results tr.is-partial td.frc-num { color: var(--frc-muted); }
.frc-status-note { display: block; font-size: 0.75rem; color: var(--frc-muted); margin-block-start: 3px; max-inline-size: 36ch; }
.frc-muted { color: var(--frc-muted); }
.frc-calc .frc-btn--primary { margin-block: 6px 4px; }

/* ---------- Phase 8: added sugar ---------- */
.frc-line__sugar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.875rem; }
.frc-line__sugar-label { font-weight: 600; color: var(--frc-muted); }
.frc-line__sugar .frc-sugar-editor { flex-basis: 100%; }
.frc-inline-help { margin: 0; }
.frc-sugar-editor { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; margin-block: 6px; background: var(--frc-surface); border-radius: 8px; }
.frc-components { display: flex; flex-direction: column; gap: 8px; }
.frc-component .frc-input:not(.frc-input--num) { flex: 1 1 160px; inline-size: auto; }
.frc-component .frc-input--num { flex: 0 0 6rem; }

/* ---------- Phase 9: micronutrients ---------- */
.frc-line__data--gap { color: var(--frc-amber); }
.frc-ngroup { margin-block-start: 10px; }
.frc-list { margin: 6px 0 10px; padding-inline-start: 20px; font-size: 0.875rem; }

/* ---------- Phase 10: regulatory presentation ---------- */
.frc-reg { border-block-start: 1px solid var(--frc-line); padding-block-start: 12px; margin-block-start: 12px; }
.frc-reg-table { max-inline-size: 520px; margin-block: 8px 12px; }
.frc-reg-row--indent1 th[scope="row"] { padding-inline-start: 20px; font-weight: 400; }
.frc-reg-row--indent2 th[scope="row"] { padding-inline-start: 36px; font-weight: 400; }

/* ---------- Phase 11: GCC ---------- */
.frc-liquid { margin-block-start: 14px; }

/* ---------- Phase 12: completeness and analysis ---------- */
.frc-dc__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.frc-dc__score { margin: 0; font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--frc-green-strong); }
.frc-dc__bar { block-size: 8px; border-radius: 999px; background: var(--frc-surface); border: 1px solid var(--frc-line); overflow: hidden; margin-block: 10px 12px; }
.frc-dc__bar span { display: block; block-size: 100%; background: var(--frc-green); }
.frc-analysis li { margin-block-end: 4px; }

/* ---------- Phase 13: saved calculations ---------- */
.frc-account { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-inline-start: auto; }
.frc-savecard { display: flex; flex-direction: column; gap: 8px; }
.frc-savebar { display: flex; flex-direction: column; gap: 8px; }
.frc-savebar__text { margin: 0; font-weight: 600; }
.frc-savebar__name { flex: 1 1 220px; inline-size: auto; }
.frc-print { align-self: flex-start; }
.frc-saved { list-style: none; margin: 12px 0 0; padding: 0; }
.frc-saved__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 12px; border-block-end: 1px solid var(--frc-line); }
.frc-saved__main { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; flex: 1 1 260px; }
.frc-saved__name { font-weight: 700; overflow-wrap: anywhere; }

@media print {
	.frc-stepper, .frc-nav, .frc-mode, .frc-account, .frc-savecard, .frc-calc, .frc-footer button, .frc-details summary { display: none !important; }
	.frc-card { border: 0; padding: 0; break-inside: avoid; }
	.frc-details:not([open]) > *:not(summary) { display: block; }
}

/* ---------- Phase 14: report ---------- */
.frc-report { border-block-start: 1px solid var(--frc-line); padding-block-start: 10px; display: flex; flex-direction: column; gap: 8px; }
.frc-leadform { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--frc-surface); border-radius: 8px; }
.frc-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; }
.frc-consent input { margin-block-start: 3px; }
.frc-hp { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ---------- Phase 15: expert help ---------- */
.frc-expert { border: 2px solid var(--frc-green); }
.frc-btn--lg { padding: 12px 22px; font-size: 1rem; align-self: flex-start; }
.frc-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.frc-textarea { inline-size: 100%; resize: vertical; }
.frc-summary--compact { font-size: 0.875rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.frc-ingredients { grid-template-columns: minmax(0, 1fr); }
	.frc-add { position: static; }
	.frc-process { grid-template-columns: minmax(0, 1fr); }
	.frc-psummary { position: static; }
}

@media (max-width: 640px) {
	.frc-card { padding: 16px; }
	.frc-stepper ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.frc-stepper__btn { font-size: 0.8125rem; padding-inline: 6px; }
	.frc-line {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"main main"
			"qty pct"
			"stage stage"
			"actions actions"
			"extra extra";
	}
	.frc-line__stage { max-inline-size: none; }
	.frc-result { flex-direction: column; align-items: stretch; }
	.frc-balance__value { font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
	.frc-balance__fill { transition: none; }
}

/* ---- rc.3: line details, compound ingredients, missing values ---- */
.frc-line__details { grid-column: 1 / -1; margin-block-start: 6px; font-size: 14px; }
.frc-line__details > summary { cursor: pointer; color: var(--frc-green-strong); font-weight: 600; padding-block: 4px; }
.frc-line__details[open] { padding: 10px 12px; border: 1px solid var(--frc-line); border-radius: var(--frc-radius); background: var(--frc-surface); }
.frc-components__list { list-style: decimal; padding-inline-start: 22px; margin: 6px 0; display: grid; gap: 6px; }
.frc-components__row { flex-wrap: nowrap; }
.frc-components__row .frc-input:first-of-type { flex: 1 1 auto; min-inline-size: 0; }
.frc-components__row .frc-input--num { flex: 0 0 5.5em; }
.frc-missing .frc-ngrid .frc-row { flex-wrap: nowrap; }
.frc-check { display: flex; align-items: center; gap: 6px; padding-block: 4px; }
.frc-fop-list { display: grid; gap: 4px; margin-block-start: 8px; padding-inline-start: 8px; }

/* ---- rc.3: images ---- */
.frc-image { display: grid; gap: 8px; justify-items: start; }
.frc-image__preview { max-inline-size: 220px; max-block-size: 160px; border: 1px solid var(--frc-line); border-radius: 8px; object-fit: contain; background: #fff; }
.frc-image__preview--logo { max-block-size: 70px; padding: 6px; }
.frc-image__btn { cursor: pointer; position: relative; }
.frc-image__btn:focus-within { outline: 3px solid var(--frc-blue); outline-offset: 2px; }

/* ---- rc.3: results ---- */
.frc-fop + .frc-fop { margin-block-start: 18px; }
.frc-fop__cells { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.frc-fop__cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--frc-ink); border-radius: 10px; font-size: 14px; }
.frc-fop__name { font-weight: 700; }
.frc-fop__band { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.frc-fop__why { font-size: 12.5px; color: var(--frc-muted); }
.frc-fop__cells--colour .frc-fop__cell--low { background: #cfeccc; border-color: #2e7d32; }
.frc-fop__cells--colour .frc-fop__cell--medium { background: #ffe6b3; border-color: #b26a00; }
.frc-fop__cells--colour .frc-fop__cell--high { background: #f8c9c4; border-color: #b3261e; }
.frc-fop__cell--unknown { border-style: dashed; border-color: #8a9692; }
.frc-fop__cell--info { border-color: #8a9692; }
.frc-statement { padding: 10px 12px; border: 1px solid var(--frc-line); border-radius: 8px; background: var(--frc-paper); }

/* ---- rc.3: versions ---- */
.frc-versions { flex-basis: 100%; margin-block-start: 8px; padding: 10px 12px; border: 1px solid var(--frc-line); border-radius: var(--frc-radius); background: var(--frc-surface); }
.frc-versions__list { margin: 6px 0 0; padding-inline-start: 0; list-style: none; display: grid; gap: 6px; }
.frc-versions__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-block: 4px; border-block-end: 1px solid var(--frc-line); }
.frc-versions__label { font-size: 14px; }
@media print { .frc-fop__cells--colour .frc-fop__cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.frc-line__details .frc-input { max-inline-size: 100%; }
.frc-line__details .frc-field { min-inline-size: 0; }


/* ======================================================================
 * rc.4 layout: workspace bar, stacked steps, one-row recipe lines.
 * ==================================================================== */
.frc--system-font { font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Arial, sans-serif; }
.frc button, .frc input, .frc select, .frc textarea { font-family: inherit; }

/* Workspace bar */
.frc-appbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 6px 8px 6px 14px;
	margin-block-end: 18px;
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	background: var(--frc-paper);
}
.frc-appbar__brand { font-weight: 700; color: var(--frc-green-strong); margin-inline-end: 8px; }
.frc-appbar__nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.frc-appbar__tab {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	border: 0;
	background: transparent;
	color: var(--frc-muted);
	padding: 8px 14px;
	border-radius: 8px;
	min-block-size: 40px;
	cursor: pointer;
}
.frc-appbar__tab:hover { color: var(--frc-ink); background: var(--frc-surface); }
.frc-appbar__tab[aria-current="page"] { color: var(--frc-green-strong); background: var(--frc-green-soft); }
.frc-appbar__count { font-variant-numeric: tabular-nums; font-weight: 400; margin-inline-start: 4px; }
.frc-appbar__account { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 0.875rem; color: var(--frc-muted); }
.frc-appbar__account a { color: var(--frc-green-strong); font-weight: 600; }

/* Calculator title row */
.frc-header { align-items: flex-start; margin-block-end: 14px; }
.frc-detail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-inline-size: 340px; }
.frc-detail__label { font-size: 0.8125rem; font-weight: 600; color: var(--frc-muted); }
.frc-detail__help { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--frc-muted); text-align: end; }

/* Stacked steps: one column everywhere */
.frc-ingredients, .frc-process { grid-template-columns: minmax(0, 1fr); }
.frc-add, .frc-psummary { position: static; }
.frc-recipe__head .frc-btn { margin-inline-start: auto; }

/* Recipe lines: name, amount, share and actions on one row when there is room */
@media (min-width: 900px) {
	.frc-line {
		grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, auto) auto;
		grid-template-areas:
			"main qty pct actions"
			"stage stage stage stage"
			"extra extra extra extra";
		align-items: center;
	}
	.frc-line__actions { justify-content: flex-end; }
}
.frc-line__title { overflow-wrap: normal; word-break: normal; }

/* Add-ingredient card at full width: forms use several columns */
.frc-add .frc-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.frc-add .frc-ngrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.frc-add .frc-custom { max-inline-size: none; }

/* My recipes */
.frc-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.frc-panel__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.frc-panel__search { inline-size: min(100%, 260px); }
.frc-usage { display: flex; align-items: center; gap: 10px; margin-block: 10px 4px; font-size: 0.875rem; color: var(--frc-muted); }
.frc-usage__bar { flex: 0 1 180px; block-size: 6px; border-radius: 999px; background: var(--frc-surface); border: 1px solid var(--frc-line); overflow: hidden; }
.frc-usage__bar span { display: block; block-size: 100%; background: var(--frc-green); }
.frc-saved__item { align-items: center; }
.frc-saved__name { font-size: 1.0625rem; }
.frc-saved__meta { font-size: 0.875rem; color: var(--frc-muted); }
.frc-saved__item .frc-line__actions { justify-content: flex-end; }

/* My company */
.frc-company { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--frc-gap); align-items: start; }

@media (max-width: 640px) {
	.frc-appbar { padding: 6px; }
	.frc-appbar__brand { display: none; }
	.frc-appbar__tab { padding: 8px 10px; font-size: 0.875rem; }
	.frc-detail { align-items: flex-start; max-inline-size: none; }
	.frc-detail__help { text-align: start; }
}
@media print { .frc-appbar, .frc-detail { display: none !important; } }
.frc-ngrid .frc-nfield { min-inline-size: 0; }
.frc-ngrid .frc-input { inline-size: 100%; min-inline-size: 0; }
#frc-cn-basis, #frc-cn-kind { max-inline-size: 360px; }
.frc-add .frc-custom .frc-choice { max-inline-size: max-content; }
@media (max-width: 640px) { .frc-saved__item .frc-line__actions { justify-content: flex-start; } }
.frc-appbar { box-shadow: 0 2px 14px var(--frc-shadow, rgba(28, 83, 197, 0.16)); }
.frc-line__details[open], .frc-versions { box-shadow: inset 0 0 0 1px var(--frc-green-soft); }

/* rc.5: My ingredients */
.frc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-start: 12px; }
.frc-choice--inline { margin-block-start: 12px; }
.frc-announce { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--frc-green-soft); color: var(--frc-ink, inherit); font-size: 0.9375rem; }
.frc-ok { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--frc-green-soft); }
.frc-mying__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 8px; }
.frc-mying__bar .frc-input { flex: 1 1 220px; }
.frc-mying__list { list-style: none; margin: 0; padding: 0; }
.frc-mying__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-block: 10px; border-block-end: 1px solid var(--frc-line); }
.frc-mying__info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-inline-size: 0; overflow-wrap: anywhere; }
.frc-mying__info .frc-muted { font-size: 0.875rem; }
.frc-mying__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* rc.5: nutrition label previews and label checklists */
.frc-lbls { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.frc-lbl { margin: 0; flex: 0 1 340px; min-inline-size: 0; max-inline-size: 100%; }
.frc-lbl figcaption { margin-block-end: 6px; }
.frc-nf { border: 1px solid #000; padding: 4px 6px; background: #fff; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.3; }
.frc-nf__title { font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.frc-nf__line { font-size: 0.875rem; }
.frc-nf__size { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95rem; font-weight: 800; }
.frc-nf__bar { background: #000; margin-block: 2px; }
.frc-nf__bar--xl { block-size: 9px; }
.frc-nf__bar--l { block-size: 5px; }
.frc-nf__small { font-size: 0.75rem; }
.frc-nf__cal { display: flex; justify-content: space-between; align-items: flex-end; font-weight: 900; font-size: 1.5rem; line-height: 1.05; }
.frc-nf__cal span:last-child { font-size: 2rem; }
.frc-nf__dv { text-align: end; font-weight: 700; font-size: 0.75rem; border-block-end: 1px solid #000; }
.frc-nf__row { display: flex; justify-content: space-between; gap: 8px; border-block-end: 1px solid #000; padding-block: 1px; }
.frc-nf__i1 { padding-inline-start: 14px; }
.frc-nf__i2 { padding-inline-start: 28px; }
.frc-nf__foot { font-size: 0.7rem; padding-block-start: 2px; }
.frc-lt { inline-size: 100%; border-collapse: collapse; border: 1.5px solid #1f2933; background: #fff; font-size: 0.875rem; }
.frc-lt caption { text-align: start; font-weight: 800; font-size: 1.05rem; padding-block-end: 4px; }
.frc-lt th, .frc-lt td { padding: 3px 6px; border-block-end: 1px solid #9aa5b1; text-align: start; }
.frc-lt thead th { font-size: 0.75rem; border-block-end: 1.5px solid #1f2933; }
.frc-lt .frc-num { text-align: end; white-space: nowrap; }
.frc-lt__i1 th { padding-inline-start: 18px; font-weight: 400; }
.frc-lt__i2 th { padding-inline-start: 32px; font-weight: 400; }
.frc-lbl--draft .frc-nf, .frc-lbl--draft .frc-lt { background: repeating-linear-gradient(135deg, #fff, #fff 14px, #f5f5f5 14px, #f5f5f5 28px); }
.frc-cl { list-style: none; margin: 8px 0; padding: 0; }
.frc-cl__item { display: flex; gap: 10px; align-items: flex-start; padding-block: 10px; border-block-end: 1px solid var(--frc-line); }
.frc-cl__item input[type="checkbox"] { inline-size: 20px; block-size: 20px; margin-block-start: 2px; flex: 0 0 auto; accent-color: var(--frc-green); }
.frc-cl__body { flex: 1 1 auto; min-inline-size: 0; }
.frc-cl__body p { margin: 4px 0 0; font-size: 0.9375rem; }
.frc-cl__el { font-weight: 700; cursor: pointer; }
.frc-cl__when, .frc-cl__src { color: var(--frc-muted); font-size: 0.875rem !important; }
.frc-cl__item.is-done { opacity: 0.75; }
.frc-cl__progress { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; }
.frc-cl__progress progress { inline-size: 160px; accent-color: var(--frc-green); }
@media print { .frc-lbl { break-inside: avoid; } .frc-cl__item { break-inside: avoid; } }