/* Recipe Cost Calculator — public stylesheet (v1.0.4)
 *
 * v1.0.4 visual direction: align with the released KnifeKettle plugin
 * family (Kitchen Converters v1.0.4, Baking Calculator Suite v1.0.13,
 * BudgetFlow Pro v1.3.6). Same indigo accent #4f46e5, same slate text
 * scale, same light slate page background, same white cards with soft
 * borders, same solid-indigo active tab, same indigo-gradient result card.
 *
 * IMPORTANT — sizing:
 *   Explicit px (and a few em) values, not rem, because the PenciDesign
 *   theme sets html { font-size: 10px }. Using rem would shrink every
 *   element to ~60% of intended. All text meets the 13px floor; controls
 *   use 16px (matches KCM/BCS and prevents iOS auto-zoom on focus).
 *
 * v1.0.4 design rules:
 *   - Light theme ONLY. The plugin must look the same regardless of
 *     browser dark mode.
 *   - Container max-width 1180px on desktop (matches KCM / BFP).
 *   - Page background slate-50 (#f8fafc) on the .rcc-app root so the
 *     plugin does not look transparent against the pennews page bg.
 *   - Header is a white card with 14px radius top corners, attached to
 *     the tab strip (no border between them).
 *   - Tab strip is a white card with 1px slate-200 border; tabs use a
 *     flex-wrap pill pattern (NOT underline tabs) — same as KCM.
 *   - Active tab is solid indigo #4f46e5 with white text.
 *   - Inactive tabs are transparent with slate-600 text, slate-100 on hover.
 *   - Section cards are white, 14px radius, soft shadow.
 *   - Result card uses a light indigo-50/100 gradient with indigo-900
 *     text and a soft indigo shadow — matches KCM result card exactly.
 *   - Validation message is a soft red card #fef2f2 with #fecaca border
 *     (only when there is an actual error). Default state is empty.
 *
 * Type floor: 13px on all text — no exceptions.
 * Touch targets: 44x44 min (Apple HIG / WCAG 2.5.5 AAA mobile).
 * Motion: respects prefers-reduced-motion.
 * All selectors scoped under .rcc-app / .rcc-* — no global pollution.
 */

/* ---- 1. Local reset (scoped) ---- */
.rcc-app,
.rcc-app *,
.rcc-app *::before,
.rcc-app *::after {
	box-sizing: border-box;
}

.rcc-app {
	--rcc-accent: #4f46e5;
	--rcc-accent-hover: #4338ca;
	--rcc-accent-deep: #1e1b4b;     /* indigo-950 — for big result values */
	--rcc-accent-label: #3730a3;    /* indigo-800 — for result labels */
	--rcc-accent-soft: #eef2ff;     /* indigo-50 */
	--rcc-accent-soft-2: #e0e7ff;   /* indigo-100 */
	--rcc-accent-ring: #c7d2fe;     /* indigo-200 — for result card border */
	--rcc-text: #0f172a;            /* slate-900 — primary text */
	--rcc-text-2: #1f2937;          /* gray-800 — secondary text */
	--rcc-muted: #64748b;           /* slate-500 — labels and helper text */
	--rcc-border: #e2e8f0;          /* slate-200 — card borders */
	--rcc-border-strong: #cbd5e1;   /* slate-300 — input borders */
	--rcc-bg: #ffffff;
	--rcc-bg-soft: #f8fafc;         /* slate-50 — page bg, disabled bg */
	--rcc-bg-soft-2: #f1f5f9;       /* slate-100 — tab hover bg */
	--rcc-danger: #991b1b;          /* red-800 — error text */
	--rcc-danger-soft: #fef2f2;     /* red-50 — error card bg */
	--rcc-danger-border: #fecaca;   /* red-200 — error card border */
	--rcc-radius: 14px;
	--rcc-radius-sm: 8px;
	--rcc-radius-tab: 6px;
	--rcc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	--rcc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06);
	--rcc-shadow-result: 0 1px 2px rgba(79, 70, 229, 0.08);
	--rcc-shadow-button: 0 1px 2px rgba(79, 70, 229, 0.18);
	--rcc-shadow-button-hover: 0 2px 4px rgba(79, 70, 229, 0.25);
	--rcc-max-width: 1180px;
	--rcc-font-size-body: 15px;
	--rcc-font-size-label: 13px;
	--rcc-font-size-result: 22px;
	--rcc-font-size-secondary: 13px;
	--rcc-control-height: 48px;
	--rcc-tab-min-height: 44px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: var(--rcc-font-size-body);
	line-height: 1.55;
	color: var(--rcc-text);
	background: var(--rcc-bg-soft);
	border: 0;
	border-radius: 0;
	padding: 24px 16px;
	max-width: var(--rcc-max-width);
	margin: 24px auto;
	-webkit-text-size-adjust: 100%;
	box-shadow: none;
	overflow-x: hidden;
}

.rcc-app * {
	box-sizing: border-box;
}

/* ---- 2. Screen reader only utility (scoped) ---- */
.rcc-app .rcc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- 3. Header — white card with 14px radius top corners, attached to tabs ---- */
.rcc-app .rcc-app__header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 16px;
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-bottom: 0;
	border-radius: var(--rcc-radius) var(--rcc-radius) 0 0;
	padding: 20px 24px;
	box-shadow: var(--rcc-shadow-md);
}

.rcc-app__title {
	font-size: 24px;
	font-weight: 800;
	color: var(--rcc-text);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.rcc-app__subtitle {
	font-size: 14px;
	color: var(--rcc-muted);
	margin: 0;
	line-height: 1.4;
}

.rcc-app__subtitle::before {
	content: "•";
	color: var(--rcc-border-strong);
	margin-right: 8px;
}

/* ---- 4. Tabs — pill style in a soft card container ---- */
.rcc-app__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 6px;
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
	box-shadow: var(--rcc-shadow-md);
}

/* On mobile (<640px), the tab strip is hidden and a select is shown. */
.rcc-app__tabs {
	display: none;
}

.rcc-app__tab-select-wrap {
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-radius: var(--rcc-radius);
	padding: 12px;
	box-shadow: var(--rcc-shadow-md);
	margin-bottom: 12px;
}

.rcc-app__tab-select {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	min-height: var(--rcc-control-height);
	padding: 8px 36px 8px 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--rcc-text);
	background-color: var(--rcc-bg);
	background-image: linear-gradient(45deg, transparent 50%, var(--rcc-muted) 50%),
		linear-gradient(135deg, var(--rcc-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	border: 1px solid var(--rcc-border-strong);
	border-radius: var(--rcc-radius-sm);
	cursor: pointer;
}

@media (min-width: 640px) {
	.rcc-app__tab-select-wrap {
		display: none;
	}
	.rcc-app__tabs {
		display: flex;
	}
	.rcc-app__tab {
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		border: 0;
		color: #475569; /* slate-600 */
		cursor: pointer;
		font: inherit;
		font-size: var(--rcc-font-size-label);
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
		padding: 12px 16px;
		min-height: var(--rcc-tab-min-height);
		min-width: 44px;
		white-space: nowrap;
		border-radius: var(--rcc-radius-tab);
		transition: color 120ms ease, background-color 120ms ease,
			box-shadow 120ms ease;
		flex: 0 0 auto;
	}
	.rcc-app__tab:hover {
		color: var(--rcc-text);
		background: var(--rcc-bg-soft-2);
	}
	.rcc-app__tab:focus {
		outline: 2px solid var(--rcc-accent);
		outline-offset: 2px;
	}
	.rcc-app__tab:focus:not(:focus-visible) {
		outline: 0;
	}
	.rcc-app__tab:focus-visible {
		outline: 2px solid var(--rcc-accent);
		outline-offset: 2px;
	}
	.rcc-app__tab[aria-selected="true"] {
		background: var(--rcc-accent); /* indigo-600 — exact match to KCM */
		color: #ffffff;
		box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
	}
	.rcc-app__tab[aria-selected="true"]:hover {
		background: var(--rcc-accent-hover);
		color: #ffffff;
	}
}

/* ---- 5. Panels container (white card attached to tabs) ---- */
.rcc-app__panels {
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-top: 0;
	border-radius: 0 0 var(--rcc-radius) var(--rcc-radius);
	padding: 24px;
	box-shadow: var(--rcc-shadow-md);
}

.rcc-app__panel[hidden] {
	display: none;
}

/* On mobile, the panels container is the same as the select wrap. */
@media (max-width: 639px) {
	.rcc-app__panels {
		border-radius: var(--rcc-radius);
		border-top: 1px solid var(--rcc-border);
	}
}

/* ---- 6. Section cards inside a panel ---- */
.rcc-card {
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-radius: var(--rcc-radius);
	box-shadow: var(--rcc-shadow);
	padding: 16px;
	margin-bottom: 16px;
}
.rcc-card:last-child {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.rcc-card {
		padding: 20px 24px;
	}
}
.rcc-card--meta {
	background: var(--rcc-bg-soft);
}

/* ---- 7. Field / input row ---- */
.rcc-field {
	display: block;
	margin-bottom: 12px;
}
.rcc-field:last-child {
	margin-bottom: 0;
}
.rcc-field__label,
.rcc-field > span {
	display: block;
	font-size: var(--rcc-font-size-label);
	color: var(--rcc-muted);
	margin-bottom: 6px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.rcc-fieldset {
	border: 0;
	margin: 0 0 12px 0;
	padding: 0;
}
.rcc-fieldset legend {
	font-size: var(--rcc-font-size-label);
	color: var(--rcc-muted);
	margin-bottom: 8px;
	padding: 0;
	font-weight: 500;
}

/* ---- 8. Inputs, selects, textareas, buttons ----
 * Higher-specificity compound selectors (.rcc-app input.rcc-input) to win
 * against host theme resets (e.g. pennews input { font-size: 12px }).
 * font-size: 16px matches KCM/BCS and prevents iOS Safari auto-zoom.
 */
.rcc-app input.rcc-input,
.rcc-app select.rcc-select,
.rcc-app textarea.rcc-input,
.rcc-app input[type="number"].rcc-input,
.rcc-app input[type="text"].rcc-input {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--rcc-control-height);
	padding: 12px 14px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--rcc-text);
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border-strong);
	border-radius: var(--rcc-radius-sm);
	margin: 0;
	box-shadow: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.rcc-app textarea.rcc-input {
	min-height: 80px;
	resize: vertical;
}

.rcc-app select.rcc-select {
	background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
		linear-gradient(135deg, #64748b 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.rcc-app input.rcc-input::placeholder,
.rcc-app textarea.rcc-input::placeholder {
	color: #94a3b8; /* slate-400 */
	opacity: 1;
}

.rcc-app input.rcc-input:hover,
.rcc-app select.rcc-select:hover,
.rcc-app textarea.rcc-input:hover {
	border-color: #94a3b8;
}

.rcc-app input.rcc-input:focus,
.rcc-app select.rcc-select:focus,
.rcc-app textarea.rcc-input:focus {
	outline: 0;
	border-color: var(--rcc-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.rcc-app input.rcc-input:focus-visible,
.rcc-app select.rcc-select:focus-visible,
.rcc-app textarea.rcc-input:focus-visible {
	outline: 2px solid var(--rcc-accent);
	outline-offset: 1px;
}

.rcc-app input.rcc-input:disabled,
.rcc-app select.rcc-select:disabled {
	background: var(--rcc-bg-soft);
	color: #94a3b8;
	cursor: not-allowed;
	opacity: 1;
}

.rcc-app input[type="number"].rcc-input {
	-moz-appearance: textfield;
}
.rcc-app input[type="number"].rcc-input::-webkit-outer-spin-button,
.rcc-app input[type="number"].rcc-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Radio (for markup/food-cost toggle) */
.rcc-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 16px;
	cursor: pointer;
	font-size: var(--rcc-font-size-body);
	color: var(--rcc-text);
}
.rcc-radio__input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--rcc-accent);
	cursor: pointer;
}

/* ---- 9. Buttons ---- */
.rcc-app button.rcc-btn,
.rcc-app input[type="button"].rcc-btn,
.rcc-app input[type="submit"].rcc-btn,
.rcc-app input[type="reset"].rcc-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--rcc-control-height);
	padding: 12px 22px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--rcc-text);
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border-strong);
	border-radius: var(--rcc-radius-sm);
	cursor: pointer;
	margin: 0;
	letter-spacing: 0.01em;
	transition: background-color 120ms ease, border-color 120ms ease,
		color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

.rcc-app button.rcc-btn:focus,
.rcc-app input[type="button"].rcc-btn:focus,
.rcc-app input[type="submit"].rcc-btn:focus,
.rcc-app input[type="reset"].rcc-btn:focus {
	outline: 0;
	border-color: var(--rcc-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.rcc-app button.rcc-btn:focus-visible,
.rcc-app input[type="button"].rcc-btn:focus-visible,
.rcc-app input[type="submit"].rcc-btn:focus-visible,
.rcc-app input[type="reset"].rcc-btn:focus-visible {
	outline: 2px solid var(--rcc-accent);
	outline-offset: 1px;
}

.rcc-app button.rcc-btn:active,
.rcc-app input[type="button"].rcc-btn:active {
	transform: translateY(1px);
}

.rcc-app button.rcc-btn[disabled],
.rcc-app input[type="button"].rcc-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

.rcc-app .rcc-btn--primary {
	background: var(--rcc-accent);
	color: #ffffff;
	border-color: var(--rcc-accent);
	box-shadow: var(--rcc-shadow-button);
}
.rcc-app .rcc-btn--primary:hover:not([disabled]) {
	background: var(--rcc-accent-hover);
	border-color: var(--rcc-accent-hover);
	box-shadow: var(--rcc-shadow-button-hover);
}

.rcc-app .rcc-btn--secondary {
	background: var(--rcc-accent-soft);
	color: var(--rcc-accent);
	border-color: var(--rcc-accent-soft);
}
.rcc-app .rcc-btn--secondary:hover:not([disabled]) {
	background: var(--rcc-accent-soft-2);
	border-color: var(--rcc-accent-soft-2);
}

.rcc-app .rcc-btn--ghost {
	background: #ffffff;
	color: #1f2937;
	border-color: var(--rcc-border-strong);
}
.rcc-app .rcc-btn--ghost:hover:not([disabled]) {
	background: var(--rcc-bg-soft);
	color: var(--rcc-text);
	border-color: #94a3b8;
}

.rcc-app .rcc-btn--danger {
	background: #ffffff;
	color: var(--rcc-danger);
	border-color: var(--rcc-danger-border);
}
.rcc-app .rcc-btn--danger:hover:not([disabled]) {
	background: var(--rcc-danger-soft);
	border-color: var(--rcc-danger);
}

/* ---- 10. Rows (batch panel) ---- */
.rcc-rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 12px;
}
.rcc-row {
	background: var(--rcc-bg);
	border: 1px solid var(--rcc-border);
	border-radius: var(--rcc-radius);
	padding: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.rcc-row__name,
.rcc-row__package_price,
.rcc-row__package_size,
.rcc-row__package_unit,
.rcc-row__amount_used,
.rcc-row__used_unit {
	grid-column: 1 / -1;
}
.rcc-row__line-cost {
	grid-column: 1 / -1;
	display: block;
	font-size: var(--rcc-font-size-result);
	font-weight: 700;
	color: var(--rcc-accent-deep);
	background: var(--rcc-accent-soft);
	padding: 10px 14px;
	border-radius: var(--rcc-radius-sm);
	font-variant-numeric: tabular-nums;
}
.rcc-row__remove {
	grid-column: 1 / -1;
}
.rcc-rows__actions {
	text-align: left;
}
@media (min-width: 768px) {
	.rcc-rows {
		grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr auto auto;
		align-items: end;
		gap: 10px;
	}
	.rcc-row {
		display: contents;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.rcc-row .rcc-field--row {
		margin-bottom: 0;
	}
	.rcc-row__line-cost {
		grid-column: 7 / 8;
		background: transparent;
		padding: 12px 14px;
	}
	.rcc-row__remove {
		grid-column: 8 / 9;
	}
	.rcc-row__name { grid-column: 1 / 2; }
	.rcc-row__package_price { grid-column: 2 / 3; }
	.rcc-row__package_size { grid-column: 3 / 4; }
	.rcc-row__package_unit { grid-column: 4 / 5; }
	.rcc-row__amount_used { grid-column: 5 / 6; }
	.rcc-row__used_unit { grid-column: 6 / 7; }
}

/* ---- 11. Result card — light indigo gradient, prominent but professional ----
 * Markup contract: each result line is a single div whose text is the
 * "Label: value" string. The CSS keeps the markup contract intact and
 * relies on the indigo gradient card background to convey "results".
 */
.rcc-result {
	display: block;
	margin: 20px 0 0;
	background: linear-gradient(180deg, var(--rcc-accent-soft) 0%, var(--rcc-accent-soft-2) 100%);
	border: 1px solid var(--rcc-accent-ring);
	border-radius: 12px;
	padding: 4px 22px;
	box-shadow: var(--rcc-shadow-result);
}
.rcc-result:empty {
	display: none;
}
.rcc-result__line,
.rcc-result__total,
.rcc-result__per-serving,
.rcc-result__suggested,
.rcc-result__selling,
.rcc-result__profit,
.rcc-result__margin {
	display: block;
	padding: 12px 0;
	border-bottom: 1px dashed var(--rcc-accent-ring);
	font-variant-numeric: tabular-nums;
}
.rcc-result__line:last-child,
.rcc-result__total:last-child,
.rcc-result__per-serving:last-child,
.rcc-result__suggested:last-child,
.rcc-result__selling:last-child,
.rcc-result__profit:last-child,
.rcc-result__margin:last-child {
	border-bottom: 0;
}
.rcc-result__total {
	color: var(--rcc-accent-deep);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.rcc-result__line,
.rcc-result__per-serving,
.rcc-result__suggested,
.rcc-result__selling,
.rcc-result__profit,
.rcc-result__margin {
	color: var(--rcc-accent-label);
	font-size: 14px;
	font-weight: 500;
}

/* ---- 12. Validation — soft red card, only on error ---- */
.rcc-validation {
	font-size: var(--rcc-font-size-label);
	color: var(--rcc-muted);
	margin-top: 12px;
	min-height: 1.4em;
	line-height: 1.5;
}
.rcc-validation[data-state="error"],
.rcc-validation.rcc-validation--error {
	color: var(--rcc-danger);
	background: var(--rcc-danger-soft);
	border: 1px solid var(--rcc-danger-border);
	border-radius: var(--rcc-radius-sm);
	padding: 10px 14px;
	font-weight: 500;
}
.rcc-validation:empty {
	display: none;
}

/* ---- 13. Footer (version/legal) ---- */
.rcc-app__footer {
	margin-top: 16px;
	text-align: center;
}
.rcc-app__legal {
	font-size: var(--rcc-font-size-secondary);
	color: var(--rcc-muted);
}

/* ---- 14. Actions container (button row) ---- */
.rcc-app__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* ---- 15. Noscript + loading fallback ---- */
.rcc-app__noscript {
	color: var(--rcc-danger);
	background: var(--rcc-danger-soft);
	border: 1px solid var(--rcc-danger-border);
	border-radius: var(--rcc-radius-sm);
	padding: 10px 14px;
	margin: 0 0 16px 0;
	font-size: var(--rcc-font-size-label);
}
.rcc-app__loading {
	color: var(--rcc-muted);
	font-size: var(--rcc-font-size-label);
	padding: 8px 0;
}

/* ---- 16. Narrow viewport tweaks ---- */
@media (max-width: 380px) {
	.rcc-app {
		padding: 16px 12px;
	}
	.rcc-row {
		padding: 12px;
	}
}

/* ---- 17. Print ---- */
@media print {
	.rcc-app__tabs,
	.rcc-app__tab-select-wrap,
	.rcc-app__actions,
	.rcc-app__footer,
	.rcc-row__remove,
	.rcc-rows__actions {
		display: none !important;
	}
	.rcc-app__panels {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	.rcc-result {
		box-shadow: none;
	}
}

/* ---- 18. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.rcc-app *,
	.rcc-app *::before,
	.rcc-app *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}