/* Rise With Teagan brand tokens (rwt-ops/kb/design-system/tokens.css). Rules below use these, never hex values or font names. */
:root {
	--rwt-terracotta:    var(--e-global-color-primary, #BC5F50);
	--rwt-sienna:        var(--e-global-color-f220437, #A14A3A);
	--rwt-tint:          var(--e-global-color-ec00e88, #F0D5CF);
	--rwt-espresso:      var(--e-global-color-text, #3D322B);
	--rwt-taupe:         var(--e-global-color-c2248c7, #887D78);
	--rwt-warm-white:    var(--e-global-color-secondary, #FFFBF8);
	--rwt-warm-cream:    var(--e-global-color-accent, #F5E9E2);
	--rwt-sans:  var(--e-global-typography-primary-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rwt-radius-pill:  999px;
	--rwt-focus:     0 0 0 3px rgba(188, 95, 80, 0.15);
	--rwt-ease:      0.15s ease;
}

/* Metric | US switch, sits above "What you'll need" */
.rwt-units { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 20px; font-family: var(--rwt-sans); }
.rwt-units__switch { display: inline-flex; padding: 3px; border-radius: var(--rwt-radius-pill); background: var(--rwt-warm-cream); }
.rwt-units .rwt-units__switch button {
	appearance: none; border: 0; margin: 0; min-width: 72px; height: 34px; padding: 0 16px;
	border-radius: var(--rwt-radius-pill); background: transparent; color: var(--rwt-espresso);
	font-family: var(--rwt-sans); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
	cursor: pointer; box-shadow: none; transition: background var(--rwt-ease), color var(--rwt-ease);
}
.rwt-units .rwt-units__switch button:hover { color: var(--rwt-sienna); background: transparent; }
.rwt-units .rwt-units__switch button.on { background: var(--rwt-terracotta); color: var(--rwt-warm-white); }
.rwt-units .rwt-units__switch button.on:hover { background: var(--rwt-sienna); color: var(--rwt-warm-white); }
.rwt-units .rwt-units__switch button:focus-visible { outline: none; box-shadow: var(--rwt-focus); }
/* 1.1.0: ½x | 1x | 2x, narrower buttons */
.rwt-units .rwt-units__switch--x button { min-width: 52px; padding: 0 12px; }
.rwt-units__note { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.35; color: var(--rwt-taupe); }
.rwt-units__note[hidden] { display: none; }
@media print { .rwt-units__switch { display: none; } }
