.cdwpoc-tile {
	margin-bottom: 1.5rem;
	/* Warm palette pulled from the theme's product board (#F7F3E9 bg, #2e390e ink). */
	--cdwpoc-ink: #2e390e;
	--cdwpoc-muted: #70715f;
	--cdwpoc-border: rgba( 46, 57, 14, 0.18 );
	--cdwpoc-border-strong: rgba( 46, 57, 14, 0.4 );
	--cdwpoc-field-bg: #ffffff;
	--cdwpoc-focus-ring: rgba( 46, 57, 14, 0.15 );
	--cdwpoc-gold: #ffc700;
}

/* Orientation disclaimer under the heading. */
.cdwpoc-tile .cdwpoc-disclaimer {
	margin: 0 0 0.85rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var( --cdwpoc-muted );
}

/* Mode selector rendered as a segmented pill toggle. */
.cdwpoc-tile .cdwpoc-modes {
	display: flex;
	gap: 0.35rem;
	margin: 0.75rem 0 1rem;
	padding: 0.25rem;
	background: rgba( 46, 57, 14, 0.06 );
	border-radius: 10px;
}

.cdwpoc-tile .cdwpoc-modes label {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	font-weight: 500;
	color: var( --cdwpoc-muted );
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.cdwpoc-tile .cdwpoc-modes label:has( input:checked ) {
	background: var( --cdwpoc-field-bg );
	color: var( --cdwpoc-ink );
	box-shadow: 0 1px 3px rgba( 46, 57, 14, 0.12 );
}

/* Keep a visible focus indicator now that the native radio is hidden. */
.cdwpoc-tile .cdwpoc-modes label:focus-within {
	box-shadow: 0 0 0 3px var( --cdwpoc-focus-ring );
}

.cdwpoc-tile .cdwpoc-modes input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.cdwpoc-tile .cdwpoc-fields {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

/* Author display rules (our flex fields, the theme's .button) override the UA [hidden] rule,
   so force hidden elements inside the tile to actually hide. */
.cdwpoc-tile [hidden] {
	display: none !important;
}

/* Field captions: small, muted, sitting above their input box. */
.cdwpoc-tile .cdwpoc-fields label,
.cdwpoc-tile .cdwpoc-coats {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --cdwpoc-muted );
	text-transform: uppercase;
}

.cdwpoc-tile .cdwpoc-times {
	padding-bottom: 0.65rem;
	color: var( --cdwpoc-muted );
	font-weight: 600;
}

/* The input boxes themselves. */
.cdwpoc-tile input[type="number"] {
	width: 100%;
	max-width: 7.5rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var( --cdwpoc-border );
	border-radius: 8px;
	background: var( --cdwpoc-field-bg );
	color: var( --cdwpoc-ink );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: inset 0 1px 2px rgba( 46, 57, 14, 0.05 );
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cdwpoc-tile .cdwpoc-fields--area input[type="number"] {
	max-width: 10rem;
}

.cdwpoc-tile input[type="number"]:hover {
	border-color: var( --cdwpoc-border-strong );
}

.cdwpoc-tile input[type="number"]:focus {
	outline: none;
	border-color: var( --cdwpoc-ink );
	box-shadow: 0 0 0 3px var( --cdwpoc-focus-ring );
}

.cdwpoc-tile .cdwpoc-coats {
	margin-bottom: 0.9rem;
	max-width: 7.5rem;
}

.cdwpoc-tile .cdwpoc-calc-btn {
	width: 100%;
}

.cdwpoc-tile .cdwpoc-results {
	margin-top: 1rem;
	border-top: 1px solid var( --cdwpoc-border );
	padding-top: 1rem;
}

.cdwpoc-tile .cdwpoc-breakdown {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.cdwpoc-tile .cdwpoc-breakdown li,
.cdwpoc-tile .cdwpoc-package-lines li,
.cdwpoc-tile .cdwpoc-package-total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}

.cdwpoc-tile .cdwpoc-breakdown li:last-child {
	font-weight: 700;
	border-top: 1px dashed var( --cdwpoc-border-strong );
	margin-top: 0.25rem;
	padding-top: 0.5rem;
}

/* Reserve checkbox: styled to sit comfortably against the beige board. */
.cdwpoc-tile .cdwpoc-reserve-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0;
	font-weight: 500;
	color: var( --cdwpoc-ink );
	cursor: pointer;
}

.cdwpoc-tile .cdwpoc-reserve-toggle input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var( --cdwpoc-ink );
	cursor: pointer;
}

.cdwpoc-tile .cdwpoc-package-lines {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}

.cdwpoc-tile .cdwpoc-package-total {
	font-weight: 700;
	border-top: 1px solid var( --cdwpoc-border-strong );
	margin-top: 0.25rem;
	padding-top: 0.5rem;
}

.cdwpoc-tile .cdwpoc-add-btn {
	width: 100%;
	margin-top: 0.75rem;
}

.cdwpoc-tile .cdwpoc-add-btn:disabled {
	cursor: default;
}

/* While adding: keep the brand gold (dimmed) instead of the theme's disabled colour.
   ID + !important so it wins over the theme's .button.alt cascade. */
#cdwpoc-calc .cdwpoc-add-btn.is-loading,
#cdwpoc-calc .cdwpoc-add-btn.is-loading:disabled {
	background: var( --cdwpoc-gold ) !important;
	color: #000000 !important;
	opacity: 0.6;
	cursor: progress;
}

/* "Added" confirmation state in the tile's own dark-olive ink. */
#cdwpoc-calc .cdwpoc-add-btn.is-added,
#cdwpoc-calc .cdwpoc-add-btn.is-added:disabled {
	background: var( --cdwpoc-ink ) !important;
	color: #ffffff !important;
	opacity: 1;
}

.cdwpoc-tile .cdwpoc-msg {
	margin-top: 0.5rem;
	min-height: 1.2em;
	color: var( --cdwpoc-ink );
}