/**
 * Cottage Cost Calculator — front-end app styles.
 *
 * Everything is scoped under .cbc-app so no rule can leak into the
 * Flatsome theme or any other plugin. Colours come from the CSS
 * variables below; the accent can be overridden from the plugin's
 * Appearance settings by printing a small inline style that only
 * redefines --cbc-accent / --cbc-accent-dark on .cbc-app.
 *
 * Audience first: women 30–70, mostly on phones, often in a kitchen.
 * Big type, big tap targets, soft rounded cards, friendly contrast.
 */

/* ==========================================================================
   1. Root scope, variables, base
   ========================================================================== */

.cbc-app {
	--cbc-accent: #0F8B8D;
	--cbc-accent-dark: #0B6E70;
	--cbc-ink: #22384F;
	--cbc-ink-soft: #4A6076;
	--cbc-coral: #F97066;
	--cbc-coral-dark: #DE554C;
	--cbc-pink: #E8557A;
	--cbc-aqua: #4FD1C5;
	--cbc-soft: #D9F2F0;
	--cbc-cream: #FFF9F2;
	--cbc-line: #B3C2CA;
	--cbc-control-line: #758B9A;
	--cbc-amber: #E8A13A;
	--cbc-amber-bg: #FDF3E0;
	--cbc-green: #4FAE62;
	--cbc-error: #9C3D2E;
	--cbc-error-bg: #FAECE8;
	--cbc-track: #EDF3F4;
	--cbc-radius: 16px;
	--cbc-radius-sm: 12px;
	--cbc-shadow: 0 6px 24px rgba(34, 56, 79, .08);
	--cbc-shadow-sm: 0 2px 10px rgba(34, 56, 79, .06);

	font-family: inherit;
	font-size: 17px;
	line-height: 1.55;
	color: var(--cbc-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.cbc-app *,
.cbc-app *::before,
.cbc-app *::after {
	box-sizing: border-box;
}

.cbc-app p {
	margin: 0 0 14px;
}

.cbc-app a {
	color: var(--cbc-accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cbc-app a:hover {
	color: var(--cbc-accent);
}

.cbc-app img {
	max-width: 100%;
	height: auto;
}

.cbc-app :focus {
	outline: none;
}

.cbc-app :focus-visible {
	outline: 3px solid var(--cbc-accent-dark);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Screen-reader-only text. */
.cbc-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */

.cbc-app .cbc-wrap {
	max-width: 880px;
	margin: 0 auto;
	padding: 8px 0 32px;
}

.cbc-app .cbc-stack > * + * {
	margin-top: 20px;
}

.cbc-app .cbc-grid {
	display: grid;
	gap: 16px;
}

.cbc-app .cbc-grid-2 {
	grid-template-columns: 1fr 1fr;
}

.cbc-app .cbc-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.cbc-app .cbc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.cbc-app .cbc-row-between {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.cbc-app .cbc-grow {
	flex: 1 1 auto;
	min-width: 0;
}

.cbc-app .cbc-text-center {
	text-align: center;
}

.cbc-app .cbc-text-right {
	text-align: right;
}

.cbc-app .cbc-muted {
	color: var(--cbc-ink-soft);
}

.cbc-app .cbc-small {
	font-size: 15px;
}

.cbc-app .cbc-mt {
	margin-top: 16px;
}

.cbc-app .cbc-mb {
	margin-bottom: 16px;
}

/* ==========================================================================
   3. Step indicator — "1. Your recipe → 2. Costs → 3. Time → 4. Price"
   ========================================================================== */

.cbc-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--cbc-line);
	border-radius: 999px;
	box-shadow: var(--cbc-shadow-sm);
}

.cbc-step {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
}

.cbc-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cbc-track);
	color: var(--cbc-ink-soft);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.cbc-step.is-active {
	color: var(--cbc-ink);
	font-weight: 700;
}

.cbc-step.is-active .cbc-step-num {
	background: var(--cbc-accent);
	color: #fff;
}

.cbc-step.is-done {
	color: var(--cbc-accent-dark);
}

.cbc-step.is-done .cbc-step-num {
	background: var(--cbc-soft);
	color: var(--cbc-accent-dark);
}

/* The check mark replaces the number once a step is done. */
.cbc-step.is-done .cbc-step-num::before {
	content: "\2713";
	font-size: 17px;
	font-weight: 800;
}

.cbc-step.is-done .cbc-step-num-text {
	display: none;
}

/* ==========================================================================
   4. Cards
   ========================================================================== */

.cbc-card {
	background: #fff;
	border: 1px solid var(--cbc-line);
	border-radius: var(--cbc-radius);
	box-shadow: var(--cbc-shadow);
	padding: 22px;
	margin-bottom: 20px;
}

.cbc-card-soft {
	background: var(--cbc-cream);
	border-color: #F0E4D3;
}

.cbc-card-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--cbc-ink);
}

.cbc-card-subtitle {
	font-size: 16px;
	color: var(--cbc-ink-soft);
	margin: 0 0 16px;
}

.cbc-card > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. Forms — fields, labels, help, inputs
   ========================================================================== */

.cbc-field {
	margin-bottom: 16px;
}

.cbc-field:last-child {
	margin-bottom: 0;
}

.cbc-label {
	display: block;
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 6px;
	color: var(--cbc-ink);
}

.cbc-label .cbc-label-note {
	font-weight: 400;
	font-size: 15px;
	color: var(--cbc-ink-soft);
}

.cbc-help {
	font-size: 15px;
	line-height: 1.5;
	color: var(--cbc-ink-soft);
	margin: 6px 0 0;
}

.cbc-help-before {
	margin: 0 0 8px;
}

.cbc-app .cbc-input,
.cbc-app .cbc-select,
.cbc-app .cbc-textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	height: 48px;
	min-width: 0;
	max-width: 100%;
	margin: 0; /* Flatsome adds a bottom margin to inputs and selects. */
	box-shadow: none;
	padding: 10px 14px;
	font-family: inherit;
	font-weight: 400;
	font-size: 17px; /* 17px+ prevents the iOS auto-zoom on focus. */
	line-height: 1.45;
	color: var(--cbc-ink);
	background: #fff;
	border: 1.5px solid var(--cbc-control-line);
	border-radius: var(--cbc-radius-sm);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cbc-app .cbc-textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

.cbc-app .cbc-textarea-tall {
	min-height: 190px;
	font-size: 16.5px;
}

.cbc-app .cbc-select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2322384F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.cbc-app .cbc-input::placeholder,
.cbc-app .cbc-textarea::placeholder {
	color: #526879;
	opacity: 1;
}

.cbc-app .cbc-input:hover,
.cbc-app .cbc-select:hover,
.cbc-app .cbc-textarea:hover {
	border-color: #526879;
}

.cbc-app .cbc-input:focus,
.cbc-app .cbc-select:focus,
.cbc-app .cbc-textarea:focus {
	border-color: var(--cbc-accent);
	box-shadow: 0 0 0 3px var(--cbc-soft);
	outline: none;
}

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

.cbc-app .cbc-input[aria-invalid="true"],
.cbc-app .cbc-select[aria-invalid="true"],
.cbc-app .cbc-textarea[aria-invalid="true"] {
	border-color: var(--cbc-coral);
	background: #FFF8F6;
}

.cbc-app .cbc-input[readonly],
.cbc-app .cbc-input:disabled,
.cbc-app .cbc-select:disabled,
.cbc-app .cbc-textarea:disabled {
	background: var(--cbc-track);
	color: var(--cbc-ink-soft);
	cursor: not-allowed;
}

/* Money / number inputs read as numbers: right-aligned, tabular figures. */
.cbc-app .cbc-input-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* One border and one height for both prefix and suffix configurations. */
.cbc-app .cbc-input-group {
	display: flex;
	align-items: stretch;
	width: 12rem;
	max-width: 100%;
	min-width: 0;
	height: 48px;
	border: 1.5px solid var(--cbc-control-line);
	border-radius: var(--cbc-radius-sm);
	background: #fff;
}

.cbc-app .cbc-input-num {
	width: 10rem;
	max-width: 100%;
}

.cbc-app .cbc-input-group > .cbc-input {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	min-height: 0;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cbc-app .cbc-input-group > :first-child {
	border-radius: 10px 0 0 10px;
}

.cbc-app .cbc-input-group > :last-child {
	border-radius: 0 10px 10px 0;
}

.cbc-app .cbc-input-group > .cbc-input:not(:first-child),
.cbc-app .cbc-input-group > .cbc-input-prefix:not(:first-child) {
	border-left: 1px solid var(--cbc-control-line);
}

.cbc-app .cbc-input-prefix {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: var(--cbc-cream);
	font-weight: 600;
	color: var(--cbc-ink-soft);
}

.cbc-app .cbc-input-group:hover {
	border-color: #526879;
}

.cbc-app .cbc-input-group:focus-within {
	border-color: var(--cbc-accent-dark);
	outline: 3px solid var(--cbc-accent-dark);
	outline-offset: 2px;
}

.cbc-app .cbc-input-group > .cbc-input:focus-visible {
	outline: none; /* The complete group carries the focus ring. */
}

.cbc-app .cbc-time-group {
	width: 18rem;
}

.cbc-app .cbc-scale-group {
	width: 20rem;
	margin-inline: 0;
}

.cbc-app .cbc-scale-group .cbc-input-prefix {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Inline checkbox / radio rows with generous tap targets. */
.cbc-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 48px;
	padding: 10px 0;
	cursor: pointer;
	font-size: 16.5px;
}

.cbc-check input[type="checkbox"],
.cbc-check input[type="radio"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--cbc-accent-dark);
	cursor: pointer;
}

/* Friendly per-line parser messages under the ingredients textarea. */
.cbc-line-error {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cbc-error);
	background: var(--cbc-error-bg);
	border-radius: 10px;
	padding: 9px 12px;
	margin-top: 8px;
}

.cbc-line-ok {
	display: block;
	font-size: 15px;
	color: var(--cbc-accent-dark);
	margin-top: 8px;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.cbc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cbc-ink);
	background: #fff;
	border: 1.5px solid var(--cbc-line);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.cbc-btn:hover {
	border-color: #B9CCD3;
}

.cbc-btn:active {
	transform: translateY(1px);
}

.cbc-btn:focus-visible {
	outline: 3px solid var(--cbc-accent-dark);
	outline-offset: 2px;
}

.cbc-btn-primary {
	background: var(--cbc-accent);
	border-color: var(--cbc-accent);
	color: #fff;
}

.cbc-btn-primary:hover {
	background: var(--cbc-accent-dark);
	border-color: var(--cbc-accent-dark);
	color: #fff;
}

.cbc-btn-ghost {
	background: transparent;
	border-color: var(--cbc-accent);
	color: var(--cbc-accent-dark);
}

.cbc-btn-ghost:hover {
	background: var(--cbc-soft);
	border-color: var(--cbc-accent-dark);
	color: var(--cbc-accent-dark);
}

.cbc-btn-danger {
	background: var(--cbc-coral);
	border-color: var(--cbc-coral);
	color: #fff;
}

.cbc-btn-danger:hover {
	background: var(--cbc-coral-dark);
	border-color: var(--cbc-coral-dark);
	color: #fff;
}

.cbc-btn-quiet {
	background: transparent;
	border-color: transparent;
	color: var(--cbc-accent-dark);
}

.cbc-btn-quiet:hover {
	background: var(--cbc-soft);
	border-color: transparent;
}

.cbc-btn-small {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 15px;
}

.cbc-btn-block {
	display: flex;
	width: 100%;
}

.cbc-btn:disabled,
.cbc-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

/* Text-button used for small row actions ("Remove", "Fix this"). */
.cbc-link-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 8px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--cbc-accent-dark);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cbc-link-btn:hover {
	color: var(--cbc-accent);
}

.cbc-link-btn-danger {
	color: var(--cbc-error);
}

/* ==========================================================================
   7. Alerts, notices, saved badge
   ========================================================================== */

.cbc-alert {
	background: var(--cbc-amber-bg);
	border: 1px solid #F2DCAE;
	border-left: 5px solid var(--cbc-amber);
	border-radius: var(--cbc-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
	color: var(--cbc-ink);
	font-size: 16px;
	line-height: 1.55;
}

.cbc-alert p {
	margin: 0 0 8px;
}

.cbc-alert p:last-child {
	margin-bottom: 0;
}

.cbc-alert-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.cbc-alert a {
	font-weight: 600;
}

.cbc-notice-success {
	background: var(--cbc-soft);
	border: 1px solid var(--cbc-aqua);
	border-left: 5px solid var(--cbc-accent);
	border-radius: var(--cbc-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 16px;
}

.cbc-notice-error {
	background: var(--cbc-error-bg);
	border: 1px solid #EBC4B8;
	border-left: 5px solid var(--cbc-error);
	border-radius: var(--cbc-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 16px;
	color: var(--cbc-ink);
}

/* Little "Saved ✓" pill shown after autosave. */
.cbc-saved-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cbc-accent-dark);
	background: var(--cbc-soft);
	border-radius: 999px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.cbc-saved-badge.is-visible {
	opacity: 1;
}

.cbc-saved-badge.is-saving {
	color: var(--cbc-ink-soft);
	background: var(--cbc-track);
}

/* ==========================================================================
   8. Ingredient cost rows (Step 2)
   ========================================================================== */

.cbc-ing-list {
	display: grid;
	gap: 12px;
}

.cbc-app .cbc-ing-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 10px 14px;
	align-items: end;
	background: var(--cbc-cream);
	border: 1px solid #F0E4D3;
	border-radius: var(--cbc-radius-sm);
	padding: 14px;
}

.cbc-app .cbc-ing-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cbc-app .cbc-ing-fields > label {
	min-width: 0;
	margin: 0;
	color: var(--cbc-ink);
}

.cbc-app .cbc-ing-fields .cbc-input,
.cbc-app .cbc-ing-fields .cbc-select {
	margin-top: 6px;
}

.cbc-app .cbc-ing-main {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cbc-ing-row .cbc-label {
	font-size: 15.5px;
	margin-bottom: 4px;
}

.cbc-ing-row .cbc-field {
	margin-bottom: 0;
}

.cbc-ing-name {
	font-size: 17.5px;
	font-weight: 700;
	align-self: center;
}

.cbc-app .cbc-ing-main .cbc-ing-amount {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
}

.cbc-app .cbc-ing-cost {
	grid-column: 1 / -1;
	font-size: 19px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: normal;
	padding-bottom: 10px;
}

.cbc-ing-cost .cbc-ing-cost-label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cbc-ink-soft);
}

.cbc-ing-row.is-incomplete {
	background: var(--cbc-amber-bg);
	border-color: #F2DCAE;
	border-left: 5px solid var(--cbc-amber);
}

.cbc-ing-missing {
	grid-column: 1 / -1;
	font-size: 15px;
	color: var(--cbc-ink);
}

.cbc-ing-missing a {
	font-weight: 600;
}

.cbc-app .cbc-ing-starter-note {
	display: block;
	grid-column: 1 / -1;
	font-size: 14.5px;
	font-style: italic;
	color: var(--cbc-ink-soft);
}

/* Named overhead / expense lines (Step 3). */
.cbc-app .cbc-expense-row {
	max-width: 42rem;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) minmax(0, 12rem);
	gap: 10px 14px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dashed var(--cbc-line);
}

.cbc-app .cbc-expense-row > .cbc-check {
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.cbc-app .cbc-expense-row .cbc-check input {
	margin: 0;
}

.cbc-app .cbc-expense-label {
	font-size: 16.5px;
	line-height: 1.45;	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
	cursor: pointer;
	color: var(--cbc-ink);
}

.cbc-app .cbc-expense-row > .cbc-link-btn {
	grid-column: 2 / -1;
	justify-self: start;
	min-height: 44px;
	margin: 0;
}

.cbc-expense-row:last-child {
	border-bottom: 0;
}

.cbc-expense-row .cbc-field {
	margin-bottom: 0;
}

/* ==========================================================================
   9. Result hero + breakdown bars
   ========================================================================== */

.cbc-result-hero {
	background: linear-gradient(160deg, var(--cbc-soft) 0%, #FFFFFF 78%);
	border: 1px solid var(--cbc-aqua);
	border-radius: 20px;
	box-shadow: var(--cbc-shadow);
	padding: 28px;
	margin-bottom: 20px;
	text-align: center;
}

.cbc-result-kicker {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cbc-accent-dark);
	margin: 0 0 6px;
}

.cbc-price-big {
	font-size: clamp(42px, 8vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cbc-accent-dark);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.cbc-price-sub {
	font-size: 19px;
	line-height: 1.5;
	color: var(--cbc-ink);
	margin: 8px 0 0;
}

.cbc-price-sub strong {
	font-variant-numeric: tabular-nums;
}

.cbc-price-alt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--cbc-aqua);
	font-size: 16.5px;
}

.cbc-price-alt strong {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
}

/* Keep form hints with their controls, including when Flatsome is loaded last. */
.cbc-app .cbc-grid > .cbc-field {
	margin-bottom: 0;
}

.cbc-app .cbc-help {
	margin: 6px 0 0;
}

.cbc-app #cbc-sec-expenses .cbc-profit-note {
	margin: 10px 0 0;
}

/* Plain-English profit sentence under the hero numbers. */
.cbc-profit-note {
	max-width: 560px;
	margin: 14px auto 0;
	font-size: 16px;
	color: var(--cbc-ink-soft);
}

/* Soft labelled breakdown bars — the friendly alternative to a table. */
.cbc-bars {
	display: grid;
	gap: 14px;
	margin: 6px 0 2px;
	text-align: left;
}

.cbc-bar-row {
	display: grid;
	grid-template-columns: 130px 1fr 92px;
	gap: 12px;
	align-items: center;
}

.cbc-bar-label {
	font-size: 16px;
	font-weight: 600;
}

.cbc-bar-track {
	height: 16px;
	background: var(--cbc-track);
	border-radius: 999px;
	overflow: hidden;
}

.cbc-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	min-width: 0;
	transition: width .35s ease;
}

.cbc-bar-ingredients {
	background: var(--cbc-accent);
}

.cbc-bar-labour {
	background: var(--cbc-aqua);
}

.cbc-bar-overheads {
	background: var(--cbc-amber);
}

.cbc-bar-profit {
	background: var(--cbc-green);
}

.cbc-bar-value {
	font-size: 16.5px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cbc-bar-value .cbc-bar-pct {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
}

/* ==========================================================================
   10. Segmented toggle (Serving / Dozen / Batch)
   ========================================================================== */

.cbc-toggle {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	background: var(--cbc-soft);
	border-radius: 999px;
}

.cbc-app .cbc-toggle-btn {
	margin: 0; /* Flatsome button margins otherwise inflate the wrapped toggle. */
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.25;
	min-height: 44px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cbc-toggle-btn:hover {
	color: var(--cbc-ink);
}

.cbc-toggle-btn.is-active {
	background: #fff;
	color: var(--cbc-ink);
	font-weight: 700;
	box-shadow: var(--cbc-shadow-sm);
}

.cbc-toggle-btn:focus-visible {
	outline: 3px solid var(--cbc-accent-dark);
	outline-offset: 2px;
}

/* ==========================================================================
   11. Guest call-to-action card
   ========================================================================== */

.cbc-cta {
	background: var(--cbc-ink);
	color: #fff;
	border-radius: 20px;
	box-shadow: var(--cbc-shadow);
	padding: 26px;
	margin-bottom: 20px;
	text-align: center;
}

.cbc-cta-title {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
	color: #fff;
}

.cbc-cta p {
	color: #DCE7EC;
	font-size: 16.5px;
	max-width: 540px;
	margin: 0 auto 16px;
}

.cbc-cta .cbc-btn {
	background: var(--cbc-coral);
	border-color: var(--cbc-coral);
	color: #fff;
}

.cbc-cta .cbc-btn:hover {
	background: var(--cbc-coral-dark);
	border-color: var(--cbc-coral-dark);
	color: #fff;
}

.cbc-cta .cbc-cta-signin {
	display: block;
	margin-top: 12px;
	font-size: 15.5px;
	color: #DCE7EC;
}

.cbc-cta .cbc-cta-signin a {
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   12. Tabs (Recipe / Costs / Expenses editor + views)
   ========================================================================== */

.cbc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 20px;
	border-bottom: 2px solid var(--cbc-line);
}

.cbc-tab {
	min-height: 48px;
	padding: 12px 18px;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	text-decoration: none;
}

.cbc-tab:hover {
	color: var(--cbc-ink);
}

.cbc-tab.is-active {
	color: var(--cbc-ink);
	font-weight: 700;
	border-bottom-color: var(--cbc-accent);
}

.cbc-tab:focus-visible {
	outline: 3px solid var(--cbc-accent-dark);
	outline-offset: 2px;
}

.cbc-tab .cbc-tab-flag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cbc-ink);
	background: var(--cbc-amber-bg);
	border: 1px solid var(--cbc-amber);
	border-radius: 999px;
	vertical-align: 2px;
}

/* ==========================================================================
   13. Library — toolbar, folder chips, recipe list
   ========================================================================== */

.cbc-lib-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}

.cbc-lib-toolbar .cbc-search {
	flex: 1 1 220px;
}

.cbc-folder-list {
	display: flex;
	gap: 8px;
	margin: 0 0 18px;
	padding: 2px 2px 8px;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.cbc-folder-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 9px 16px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--cbc-ink);
	background: #fff;
	border: 1.5px solid var(--cbc-line);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}

.cbc-folder-item:hover {
	border-color: var(--cbc-accent);
}

.cbc-folder-item.is-active {
	background: var(--cbc-accent);
	border-color: var(--cbc-accent);
	color: #fff;
	font-weight: 700;
}

.cbc-folder-item .cbc-folder-count {
	font-size: 13.5px;
	font-weight: 600;
	padding: 0 8px;
	background: var(--cbc-soft);
	border-radius: 999px;
	color: var(--cbc-accent-dark);
}

.cbc-folder-item.is-active .cbc-folder-count {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

.cbc-recipe-list {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cbc-recipe-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--cbc-line);
	border-radius: var(--cbc-radius);
	box-shadow: var(--cbc-shadow-sm);
}

.cbc-recipe-main {
	min-width: 0;
}

.cbc-recipe-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.cbc-recipe-title a {
	color: var(--cbc-ink);
	text-decoration: none;
}

.cbc-recipe-title a:hover {
	color: var(--cbc-accent-dark);
	text-decoration: underline;
}

.cbc-recipe-meta {
	font-size: 14.5px;
	color: var(--cbc-ink-soft);
	margin-top: 2px;
}

.cbc-recipe-side {
	flex: 0 0 auto;
	text-align: right;
}

.cbc-recipe-price {
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cbc-recipe-price-label {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cbc-ink-soft);
}

.cbc-recipe-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin-top: 6px;
}

/* Ingredient library list rows reuse the recipe item shell. */
.cbc-ing-item-price {
	font-size: 16.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ==========================================================================
   14. Detailed pricing — stat cards + roomy tables
   ========================================================================== */

.cbc-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.cbc-stat {
	background: var(--cbc-cream);
	border: 1px solid #F0E4D3;
	border-radius: var(--cbc-radius-sm);
	padding: 14px 16px;
}

.cbc-stat-label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--cbc-ink-soft);
	margin-bottom: 4px;
}

.cbc-stat-value {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.cbc-stat-note {
	display: block;
	font-size: 14px;
	color: var(--cbc-ink-soft);
	margin-top: 2px;
}

.cbc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 20px;
}

.cbc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
	background: #fff;
}

.cbc-table caption {
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	padding: 0 0 10px;
}

.cbc-table th,
.cbc-table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--cbc-line);
}

.cbc-table thead th {
	font-size: 14px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--cbc-ink-soft);
	border-bottom: 2px solid var(--cbc-line);
}

.cbc-table tbody tr:nth-child(even) {
	background: #F7FAFA;
}

.cbc-table .cbc-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cbc-table tfoot td,
.cbc-table tfoot th {
	font-weight: 700;
	border-top: 2px solid var(--cbc-line);
	border-bottom: 0;
}

.cbc-table .cbc-row-total td {
	font-weight: 700;
	background: var(--cbc-soft);
}

/* Shopping-list rows. */
.cbc-shop-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 14px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--cbc-line);
}

.cbc-shop-row:last-child {
	border-bottom: 0;
}

.cbc-shop-name {
	font-weight: 600;
}

.cbc-shop-detail {
	grid-column: 1 / -1;
	font-size: 15px;
	color: var(--cbc-ink-soft);
}

.cbc-shop-spend {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ==========================================================================
   15. Empty states
   ========================================================================== */

.cbc-empty {
	border: 2px dashed var(--cbc-line);
	border-radius: var(--cbc-radius);
	background: #fff;
	padding: 34px 24px;
	margin-bottom: 20px;
	text-align: center;
}

.cbc-empty-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
}

.cbc-empty p {
	color: var(--cbc-ink-soft);
	font-size: 16px;
	max-width: 460px;
	margin: 0 auto 16px;
}

.cbc-empty p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   16. Modal (confirm delete, restore version, etc.)
   ========================================================================== */

.cbc-modal {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(34, 56, 79, .55);
}

.cbc-modal[hidden] {
	display: none;
}

.cbc-modal-card {
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(34, 56, 79, .28);
	padding: 26px;
}

.cbc-modal-title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
}

.cbc-modal-card p {
	color: var(--cbc-ink-soft);
	font-size: 16px;
}

.cbc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
}

/* ==========================================================================
   17. Version history + miscellany
   ========================================================================== */

.cbc-version-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cbc-version-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
	padding: 12px 14px;
	background: var(--cbc-cream);
	border: 1px solid #F0E4D3;
	border-radius: var(--cbc-radius-sm);
	font-size: 15.5px;
}

.cbc-version-item .cbc-version-price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cbc-thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--cbc-line);
	flex: 0 0 auto;
}

.cbc-divider {
	border: 0;
	border-top: 1px solid var(--cbc-line);
	margin: 20px 0;
}

.cbc-app .cbc-loading {
	display: block;
	width: 100%;
	padding: 18px 20px;
	border: 1px solid var(--cbc-line);
	border-radius: var(--cbc-radius-sm);
	background: var(--cbc-cream);
	color: var(--cbc-ink);
	font-size: 17px;
	line-height: 1.5;
}

.cbc-app .cbc-loading p {
	margin: 0;
}

/* ==========================================================================
   18. Small screens — stack everything, keep targets big
   ========================================================================== */

@media (max-width: 640px) {
	.cbc-app {
		font-size: 16.5px;
	}

	.cbc-card {
		padding: 16px;
	}

	.cbc-card-title {
		font-size: 20px;
	}

	.cbc-result-hero {
		padding: 22px 16px;
	}

	.cbc-price-big {
		font-size: clamp(38px, 11vw, 48px);
	}

	.cbc-price-sub {
		font-size: 17.5px;
	}

	/* Step indicator: keep the numbered circles, hide the words. */
	.cbc-steps {
		gap: 6px 12px;
		padding: 10px 14px;
		border-radius: var(--cbc-radius);
	}

	.cbc-step-label {
		display: none;
	}

	.cbc-step.is-active .cbc-step-label {
		display: inline;
	}

	.cbc-grid-2,
	.cbc-grid-3 {
		grid-template-columns: 1fr;
	}

	.cbc-app .cbc-ing-row {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.cbc-ing-name {
		grid-column: 1 / -1;
	}

	.cbc-app .cbc-ing-cost {
		grid-column: 1 / -1;
		text-align: left;
		padding-bottom: 0;
	}

	.cbc-ing-cost .cbc-ing-cost-label {
		display: inline;
		margin-right: 6px;
	}

	.cbc-app .cbc-expense-row {
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 10px;
	}

	.cbc-app .cbc-expense-row > .cbc-input-group {
		grid-column: 2;
	}

	.cbc-bar-row {
		grid-template-columns: 1fr 76px;
		grid-template-rows: auto auto;
		row-gap: 5px;
	}

	.cbc-bar-track {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.cbc-bar-value {
		grid-column: 2;
		grid-row: 1;
	}

	.cbc-recipe-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.cbc-recipe-side {
		text-align: left;
	}

	.cbc-modal-card {
		padding: 20px 16px;
	}

	.cbc-modal-actions .cbc-btn {
		flex: 1 1 auto;
	}

	.cbc-cta {
		padding: 22px 16px;
	}
}

/* Keep ingredient selectors and their complete option text readable on phones. */
@media (max-width: 440px) {
	.cbc-app .cbc-toggle {
		display: flex;
		flex-direction: column;
		border-radius: var(--cbc-radius-sm);
	}

	.cbc-app .cbc-ing-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.cbc-app *,
	.cbc-app *::before,
	.cbc-app *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Saved recipes: one compact list shared by calculator and WooCommerce. */
.cbc-app .cbc-saved-heading h2 { color: var(--cbc-ink); margin: 0 0 6px; font-size: 24px; }
.cbc-app .cbc-saved-heading p { color: var(--cbc-ink-soft); font-size: 15px; }
.cbc-app .cbc-saved-list {
	container: cbc-saved / inline-size;
	border: 1px solid var(--cbc-line);
	border-radius: 10px;
	background: #fff;
}
.cbc-app .cbc-saved-columns {
	display: grid;
	grid-template-columns: minmax(0,1fr) 7rem 6rem 7rem 6.5rem;
	gap: 12px;
	padding: 10px 12px;
	background: var(--cbc-track);
	color: var(--cbc-ink);
	border-radius: 10px 10px 0 0;
	font-size: 14px;
	font-weight: 600;
}
.cbc-app .cbc-saved-rows { list-style: none; margin: 0; padding: 0; }
.cbc-app .cbc-saved-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr) 6.5rem;
	gap: 12px;
	margin: 0;
	padding: 0 12px;
	border-top: 1px solid var(--cbc-line);
}
.cbc-app .cbc-saved-row:hover { background: var(--cbc-cream); }
.cbc-app .cbc-saved-row:focus-within { outline: 3px solid var(--cbc-accent-dark); outline-offset: 2px; z-index: 2; }
.cbc-app .cbc-saved-open {
	display: grid;
	grid-template-columns: minmax(0,1fr) 7rem 6rem 7rem;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	min-height: 64px;
	min-width: 0;
	color: var(--cbc-ink);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}
.cbc-app .cbc-saved-open::after { content: ''; position: absolute; inset: 0; }
.cbc-app .cbc-saved-open:hover { color: var(--cbc-ink); }
.cbc-app .cbc-saved-open > span { min-width: 0; overflow-wrap: anywhere; }
.cbc-app .cbc-saved-name { font-size: 16px; font-weight: 600; }
.cbc-app .cbc-saved-updated { display: block; font-weight: 400; font-size: 13px; color: var(--cbc-ink-soft); margin-top: 3px; }
.cbc-app .cbc-saved-date-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.cbc-app .cbc-saved-estimate { font-variant-numeric: tabular-nums; }
.cbc-app .cbc-saved-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; pointer-events: none; }
.cbc-app .cbc-saved-actions > * { pointer-events: auto; }
.cbc-app .cbc-saved-actions .cbc-link-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
}
.cbc-app .cbc-lib-toolbar .cbc-btn-primary,
.cbc-app .cbc-empty .cbc-btn-primary,
.cbc-app .cbc-alert .cbc-btn-primary { background: var(--cbc-accent-dark); border-color: var(--cbc-accent-dark); color: #fff; }
.cbc-app .cbc-folder-item { margin: 0; min-height: 44px; padding: 8px 12px; text-transform: none; letter-spacing: normal; line-height: 1.25; }
.cbc-app .cbc-folder-item.is-active { background: var(--cbc-soft); color: var(--cbc-ink); border-color: var(--cbc-accent-dark); }
.cbc-app .cbc-folder-item.is-active .cbc-folder-count { color: var(--cbc-ink); background: var(--cbc-track); }
.cbc-app .cbc-lib-toolbar > .cbc-toggle { flex-direction: row; flex-wrap: nowrap; border-radius: 999px; }
.cbc-app .cbc-lib-toolbar .cbc-toggle-btn { padding: 8px 12px; }
.cbc-app .cbc-cta .cbc-row { justify-content: center; }
.cbc-app .cbc-cta > .cbc-small { color: #DCE7EC; }
.cbc-app .cbc-alert[hidden] { display: none; }
@container cbc-saved (max-width: 680px) {
	.cbc-app .cbc-saved-columns { display: none; }
	.cbc-app .cbc-saved-open { grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 7px 12px; }
	.cbc-app .cbc-saved-name, .cbc-app .cbc-saved-estimate { grid-column: 1 / -1; }
	.cbc-app .cbc-saved-date-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.cbc-app .cbc-saved-estimate .cbc-saved-updated { display: inline; margin-left: 5px; }
}
@media (max-width: 640px) {
	.cbc-app .cbc-saved-columns { display: none; }
	.cbc-app .cbc-saved-open { grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 7px 12px; }
	.cbc-app .cbc-saved-name, .cbc-app .cbc-saved-estimate { grid-column: 1 / -1; }
	.cbc-app .cbc-saved-date { font-size: 14px; }
	.cbc-app .cbc-saved-date-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.cbc-app .cbc-saved-estimate .cbc-saved-updated { display: inline; margin-left: 5px; }
	.cbc-app .cbc-saved-row { grid-template-columns: minmax(0,1fr) 3.25rem; gap: 8px; }
	.cbc-app .cbc-saved-actions { flex-direction: column; gap: 0; justify-content: center; }
	.cbc-app .cbc-lib-toolbar { display: grid; grid-template-columns: minmax(0,1fr); }
	.cbc-app .cbc-lib-toolbar > .cbc-toggle, .cbc-app .cbc-lib-toolbar > .cbc-btn { justify-self: start; }
	.cbc-app .cbc-folder-list { flex-wrap: wrap; overflow: visible; }
}

/* 1.1.0-rc2: compact label-generator companion layout. Calculator scope only. */
.cbc-app {
	--cbc-soft: #E0F0F0;
	--cbc-cream: #F4F9F9;
	--cbc-control-line: #84999F;
	--cbc-radius-sm: 10px;
	--cbc-tool-teal: #367C7E;
	container: calculator / inline-size;
	max-width: 1100px;
	width: 100%;
	margin-inline: auto;
	font-size: 16px;
}
.cbc-app .cbc-editor-layout { display: grid; gap: 20px; align-items: start; }
.cbc-app .cbc-editor-inputs, .cbc-app .cbc-editor-summary { min-width: 0; }
.cbc-app .cbc-card { padding: 20px; margin-bottom: 16px; border-color: #B7CCCE; border-radius: 18px; }
.cbc-app .cbc-editor-inputs > .cbc-card { background: var(--cbc-soft); box-shadow: none; border-color: transparent; }
.cbc-app .cbc-card-title { font-size: 21px; margin-bottom: 14px; }
.cbc-app h3 { font-size: 18px; margin: 16px 0 8px; color: var(--cbc-ink); }
.cbc-app h4 { font-size: 16px; color: var(--cbc-ink); }
.cbc-app .cbc-label { font-size: 16px; margin-bottom: 5px; }
.cbc-app .cbc-field { margin-bottom: 14px; }
.cbc-app .cbc-grid { gap: 12px; }
.cbc-app #cbc-sec-recipe > .cbc-grid { grid-template-columns: 7.5rem minmax(0,1fr); margin-bottom: 14px; }
.cbc-app #cbc-sec-recipe > .cbc-grid > :last-child { grid-column: 1 / -1; }
.cbc-app #cbc-sec-expenses > .cbc-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.cbc-app #cbc-sec-expenses > .cbc-grid > :last-child { grid-column: 1 / -1; }
.cbc-app .cbc-textarea { min-height: 96px; }
.cbc-app .cbc-textarea-tall { min-height: 170px; }
.cbc-app .cbc-help, .cbc-app .cbc-profit-note { font-size: 14px; line-height: 1.5; }
.cbc-app .cbc-btn { min-height: 48px; border-radius: 999px; font-size: 15px; padding: 10px 18px; letter-spacing: .02em; line-height: 1.4; }
.cbc-app .cbc-btn-primary, .cbc-app .cbc-lib-toolbar .cbc-btn-primary,
.cbc-app .cbc-empty .cbc-btn-primary, .cbc-app .cbc-alert .cbc-btn-primary,
.cbc-app .cbc-cta .cbc-btn-primary { background: var(--cbc-tool-teal); border-color: var(--cbc-tool-teal); color: #fff; }
.cbc-app .cbc-btn-primary:hover { background: var(--cbc-accent-dark); border-color: var(--cbc-accent-dark); }
.cbc-app .cbc-btn-ghost { background: #fff; color: var(--cbc-ink); border-color: var(--cbc-ink); }
.cbc-app .cbc-steps { margin-bottom: 20px; padding: 10px 14px; gap: 8px 16px; box-shadow: none; border-color: var(--cbc-ink); }
.cbc-app .cbc-step { font-size: 14px; }
.cbc-app .cbc-step-num { width: 28px; height: 28px; font-size: 14px; }
.cbc-app .cbc-step.is-active .cbc-step-num { background: var(--cbc-ink); color: #fff; }
.cbc-app .cbc-ing-list { gap: 10px; }
.cbc-app .cbc-ing-row { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px; background: #fff; border-color: #B7CCCE; align-items: start; }
.cbc-app .cbc-ing-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cbc-app .cbc-ing-name { font-size: 16px; }
.cbc-app .cbc-ing-amount { font-size: 14px; }
.cbc-app .cbc-ing-starter-note { flex-basis: 100%; font-size: 13px; }
.cbc-app .cbc-ing-fields { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.cbc-app .cbc-ing-fields > label { font-size: 14px; }
.cbc-app .cbc-ing-fields > label:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.cbc-app .cbc-ing-fields > label:first-child select { width: auto; max-width: calc(100% - 80px); margin-top: 0; }
.cbc-app .cbc-ing-fields .cbc-input-num { width: 100%; }
.cbc-app .cbc-ing-fields .cbc-input, .cbc-app .cbc-ing-fields .cbc-select { padding-inline: 10px; }
.cbc-app .cbc-ing-cost { grid-column: 1; text-align: left; font-size: 15px; padding: 2px 0 0; }
.cbc-app .cbc-ing-cost .cbc-ing-cost-label { display: inline; margin-right: 8px; }
.cbc-app .cbc-expense-group { border-top: 1px solid #A7C3C5; margin-top: 16px; padding-top: 12px; }
.cbc-app .cbc-expense-group h4 { margin: 0 0 4px; }
.cbc-app .cbc-expense-row { grid-template-columns: 44px minmax(0,1fr) 7.5rem; gap: 8px; padding: 8px 0; }
.cbc-app .cbc-expense-name { min-width: 0; }
.cbc-app .cbc-expense-name > label { font-size: 15px; }
.cbc-app .cbc-expense-name > .cbc-small { display: block; margin-top: 8px; }
.cbc-app .cbc-expense-name .cbc-select { font-size: 15px; padding-inline: 8px; margin-top: 4px; }
.cbc-app .cbc-expense-row > .cbc-input-group { grid-column: 3; width: 100%; }
.cbc-app .cbc-time-group { width: 100%; max-width: 18rem; }
.cbc-app .cbc-time-group .cbc-input-prefix { padding-inline: 7px; }
.cbc-app .cbc-editor-summary > .cbc-card { margin: 0; background: #fff; }
.cbc-app .cbc-result-hero { padding: 16px; margin-bottom: 14px; background: var(--cbc-cream); border: 1px solid #B7CCCE; border-radius: 12px; box-shadow: none; }
.cbc-app .cbc-price-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.cbc-app .cbc-price-pair > div { min-width: 0; text-align: left; }
.cbc-app .cbc-price-pair > div + div { border-left: 1px solid #B7CCCE; padding-left: 12px; }
.cbc-app .cbc-result-kicker { font-size: 12px; letter-spacing: .035em; margin-bottom: 8px; }
.cbc-app .cbc-price-big, .cbc-app .cbc-materials-big { font-size: clamp(24px,3vw,34px); font-weight: 750; line-height: 1.2; color: var(--cbc-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.cbc-app .cbc-price-big { color: var(--cbc-accent-dark); }
.cbc-app .cbc-price-sub { font-size: 14px; margin: 4px 0 0; }
.cbc-app .cbc-result-hero > .cbc-help { text-align: left; margin-bottom: 12px; font-size: 13px; }
.cbc-app .cbc-result-hero .cbc-toggle { display: flex; flex-direction: row; flex-wrap: wrap; border-radius: 10px; padding: 3px; gap: 2px; }
.cbc-app .cbc-result-hero .cbc-toggle-btn { flex: 1 1 auto; min-height: 44px; padding: 8px; font-size: 13px; }
.cbc-app .cbc-price-alt { display: block; font-size: 13px; margin: 10px 0 0; padding-top: 10px; }
.cbc-app .cbc-breakdown-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cbc-app .cbc-bar-row { grid-template-columns: minmax(0,1fr) 5rem; grid-template-rows: auto auto; gap: 4px 8px; margin-bottom: 8px; }
.cbc-app .cbc-bar-label { font-size: 14px; }
.cbc-app .cbc-bar-value { grid-column: 2; grid-row: 1; font-size: 14px; }
.cbc-app .cbc-bar-pct { display: none; }
.cbc-app .cbc-bar-track { grid-column: 1 / -1; grid-row: 2; height: 5px; }
.cbc-app .cbc-bar-ingredients { background: #367C7E; }
.cbc-app .cbc-bar-labour { background: #22384F; }
.cbc-app .cbc-bar-overheads { background: #5C9298; }
.cbc-app .cbc-bar-fees { background: #75849B; }
.cbc-app .cbc-bar-profit { background: #217773; }
.cbc-app .cbc-editor-summary .cbc-row { gap: 8px; }
.cbc-app .cbc-editor-summary .cbc-row > .cbc-btn { flex: 1 1 auto; }
.cbc-app .cbc-editor-summary .cbc-check { font-size: 14px; }
.cbc-app .cbc-editor-summary .cbc-check .cbc-label-note { font-size: 13px; }
.cbc-app .cbc-editor-summary .cbc-alert { font-size: 14px; padding: 12px; }
.cbc-app .cbc-editor-summary .cbc-alert ul { padding-left: 18px; }
.cbc-app .cbc-cta { margin-top: 20px; background: var(--cbc-soft); color: var(--cbc-ink); border: 1px solid #B7CCCE; padding: 22px; }
.cbc-app .cbc-cta-title { color: var(--cbc-ink); }
.cbc-app .cbc-cta p, .cbc-app .cbc-cta > .cbc-small { color: var(--cbc-ink-soft); }
.cbc-app .cbc-saved-columns { grid-template-columns: minmax(0,1fr) 6rem 4.5rem 6.5rem 6.5rem 6rem; gap: 10px; }
.cbc-app .cbc-saved-open { grid-template-columns: minmax(0,1fr) 6rem 4.5rem 6.5rem 6.5rem; gap: 10px; }
.cbc-app .cbc-saved-row { grid-template-columns: minmax(0,1fr) 6rem; gap: 10px; }
.cbc-app .cbc-saved-materials { font-variant-numeric: tabular-nums; }
.cbc-app .cbc-saved-value-label { display: none; }
@container calculator (min-width: 960px) {
	.cbc-app .cbc-editor-layout { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; }
	.cbc-app .cbc-editor-summary { position: sticky; top: 48px; max-height: calc(100dvh - 64px); overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
}
@container cbc-saved (max-width: 820px) {
	.cbc-app .cbc-saved-columns { display: none; }
	.cbc-app .cbc-saved-open { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 12px; }
	.cbc-app .cbc-saved-name { grid-column: 1 / -1; }
	.cbc-app .cbc-saved-materials, .cbc-app .cbc-saved-estimate { grid-column: auto; }
	.cbc-app .cbc-saved-value-label { display: block; font-size: 12px; color: var(--cbc-ink-soft); }
	.cbc-app .cbc-saved-date-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.cbc-app .cbc-saved-materials .cbc-saved-updated, .cbc-app .cbc-saved-estimate .cbc-saved-updated { display: block; margin-left: 0; }
}
@media (max-width: 640px) {
	.cbc-app .cbc-card { padding: 16px; }
	.cbc-app .cbc-steps { padding: 8px; border-radius: 12px; gap: 6px 12px; }
	.cbc-app .cbc-step { font-size: 13px; }
	.cbc-app #cbc-sec-expenses > .cbc-grid { grid-template-columns: minmax(0,1fr); }
	.cbc-app .cbc-ing-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.cbc-app .cbc-ing-fields > label:last-child { grid-column: 1 / -1; }
	.cbc-app .cbc-ing-fields > label:first-child select { width: 100%; }
	.cbc-app .cbc-expense-row { grid-template-columns: 36px minmax(0,1fr) 6.5rem; }
	.cbc-app .cbc-expense-row > .cbc-check { min-width: 36px; }
	.cbc-app .cbc-expense-row > .cbc-input-group { grid-column: 3; }
	.cbc-app .cbc-expense-name .cbc-input { padding-inline: 8px; }
	.cbc-app .cbc-saved-open { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
	.cbc-app .cbc-saved-name { grid-column: 1 / -1; }
	.cbc-app .cbc-saved-materials, .cbc-app .cbc-saved-estimate { grid-column: auto; }
	.cbc-app .cbc-saved-value-label { display: block; font-size: 12px; color: var(--cbc-ink-soft); }
	.cbc-app .cbc-saved-row { grid-template-columns: minmax(0,1fr) 3.25rem; }
	.cbc-app .cbc-saved-materials .cbc-saved-updated, .cbc-app .cbc-saved-estimate .cbc-saved-updated { display: block; margin-left: 0; }
}

.cbc-app .cbc-bars { gap: 4px; }
.cbc-app .cbc-bar-row { margin-bottom: 4px; }
.cbc-app .cbc-detail-panel { margin-top: 20px; }
.cbc-app .cbc-detail-panel[hidden] { display: none; }
@container calculator (min-width: 760px) {
 .cbc-app .cbc-detail-panel > .cbc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Neutralize theme button spacing inside these compact toolbars. */
.cbc-app .cbc-btn { margin: 0; }
.cbc-app .cbc-tabs { margin-bottom: 14px; }
.cbc-app .cbc-tab { min-height: 48px; line-height: 1.3; padding: 8px 14px; font-size: 15px; }
.cbc-app .cbc-lib-toolbar { gap: 8px; margin-bottom: 12px; }
.cbc-app .cbc-lib-toolbar > .cbc-toggle { padding: 4px; }
.cbc-app .cbc-lib-toolbar .cbc-toggle-btn { min-height: 44px; line-height: 1.25; padding: 8px; font-size: 14px; }
.cbc-app .cbc-folder-list { gap: 6px; margin-bottom: 12px; padding-bottom: 0; }
@media (max-width: 640px) {
 .cbc-app .cbc-lib-toolbar { grid-template-columns: minmax(0,1fr) auto; }
 .cbc-app .cbc-lib-toolbar > .cbc-search { grid-column: 1 / -1; }
 .cbc-app .cbc-lib-toolbar > .cbc-btn { padding: 10px 12px; font-size: 13px; }
 .cbc-app .cbc-folder-item { padding-inline: 9px; font-size: 13px; gap: 5px; }
}
@media (max-width: 380px) {
 .cbc-app .cbc-lib-toolbar { grid-template-columns: minmax(0,1fr); }
 .cbc-app .cbc-expense-row { grid-template-columns: 36px minmax(0,1fr); }
 .cbc-app .cbc-expense-row > .cbc-input-group { grid-column: 2; width: 8rem; }
}

/* RC3: blank editor, explicit recovery and order-specific cost choices. */
.cbc-app .cbc-editor-tools { margin-top: 14px; gap: 8px; }
.cbc-app .cbc-editor-tools .cbc-btn { font-size: 14px; padding-inline: 14px; }
.cbc-app .cbc-recovery-alert { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cbc-app .cbc-recovery-alert > p { flex: 1 1 18rem; margin: 0; font-size: 14px; }
.cbc-app .cbc-recovery-list, .cbc-app .cbc-cost-options { display: grid; gap: 8px; }
.cbc-app .cbc-recovery-list .cbc-btn { text-transform: none; text-align: left; overflow-wrap: anywhere; }
.cbc-app .cbc-cost-options .cbc-btn { text-transform: none; text-align: left; }
.cbc-app .cbc-modal-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
.cbc-app .cbc-refresh-status { color: #435d68; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.cbc-app .cbc-refresh-status:empty { display: none; }
.cbc-app .cbc-refresh-status .cbc-link-btn { min-height: 44px; }
@media (max-width: 640px) {
 .cbc-app .cbc-editor-tools .cbc-btn { font-size: 13px; padding-inline: 12px; }
}