/* Reef Tank Planner — ReefDudes brand applied. Scoped under .rtp-app to avoid theme bleed. */

.rtp-app {
	color-scheme: light;

	/* Type system. Body uses the host's system stack — fast, native-feeling.
	 * Display uses Fraunces (variable serif with SOFT axis cranked for warmth) so
	 * the brand has a typographic signature, not just a color one. Metric-matched
	 * fallback chain keeps headings readable while the variable font streams in. */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	--font-display: "Fraunces", "Iowan Old Style", "Charter", "Cambria", "Georgia", serif;

	/* Modular type scale — 1.25 ratio anchored at 1rem body. */
	--text-2xs: 0.7rem;     /* small caps section labels */
	--text-xs:  0.78rem;    /* tab labels, footnotes */
	--text-sm:  0.875rem;   /* meta, captions, secondary */
	--text-md:  1rem;       /* body, h4 / h5 */
	--text-lg:  1.25rem;    /* h3 card titles */
	--text-xl:  1.563rem;   /* h2 pane titles, wordmark */
	--text-2xl: 1.953rem;   /* hero / over-sized */

	/* Spacing scale — tight increments, used for gap/padding/margin throughout. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--bg:            #f0f5fa;
	--bg-2:          #dde9f3;
	--panel:         #ffffff;
	--panel-2:       #f4f8fc;

	--header:        #3a8ee0;
	--header-text:   #ffffff;

	--text:          #1c3344;
	--text-2:        #46586a;
	--muted:         #7a8a96;
	--border:        #cdd8e2;
	--border-strong: #a8b6c4;

	--accent:        #3a8ee0;
	--accent-hover:  #4ea0ea;
	--accent-soft:   #e8f1fb;
	--actinic:       #5aa6e8;
	--coral:         #ff7e62;

	--good:   #2d8e6f;
	--warn:   #c47a1c;
	--error:  #c44a4a;
	--info:   #3a8ee0;
	--focus-ring: rgba(58, 142, 224, 0.30);

	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: 1.55;
	color: var(--text);
	background: linear-gradient(180deg, #f3f7fc 0%, #dde9f3 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	/* min(1200px, 100%) so a constrained WP theme (often 720–960px content) doesn't
	 * cause the planner to overflow its container or stretch the page. */
	max-width: min(1200px, 100%);
	margin: 1.5rem auto;
	box-shadow: 0 2px 12px rgba(28, 75, 130, 0.08);
}

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

/* Display family for the wordmark and headings. SOFT axis at 100 (max) gives
 * Fraunces its rounded, friendly terminals; opsz at 96 picks the display master. */
.rtp-app .rtp-wordmark,
.rtp-app .rtp-pane h2,
.rtp-app .rtp-card h3,
.rtp-app .rtp-stats-hero__tank {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 96, "SOFT" 100;
	font-feature-settings: "ss01" 1; /* friendlier 'g', if available */
	letter-spacing: -0.01em;
}
.rtp-app .rtp-pane h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
}
.rtp-app .rtp-card h3 {
	font-size: var(--text-lg);
	font-weight: 600;
}
.rtp-app .rtp-stats-hero__tank {
	font-size: var(--text-lg);
	font-weight: 700;
}

/* Tabular numerals for any number that wants to align cleanly. */
.rtp-app .rtp-stat-group__rows dd,
.rtp-app .rtp-eq-meta,
.rtp-app .rtp-summary {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------- *
 * Theme-conflict armor
 *
 * WordPress themes commonly target generic elements (`nav { display: block }`,
 * `header > * { float: left }`, etc.) with high enough specificity that they
 * outrank the planner's bare-class layout rules. The result on production
 * was the phase stepper stacking vertically and the feedback button
 * stretching full-width — both fixed by raising specificity here with the
 * `.rtp-app` parent prefix + !important on layout-critical properties.
 *
 * !important is used sparingly and ONLY on properties that would visually
 * break the planner if a theme overrode them: display, position, the box
 * that anchors absolute children. Color/spacing/typography tokens stay
 * regular-priority so themes that genuinely want to retheme can still do
 * so via the `--rtp-*` custom properties.
 * --------------------------------------------------------------------- */
.rtp-app .rtp-header { position: relative !important; }
.rtp-app .rtp-phases { display: flex !important; flex-wrap: nowrap !important; }
.rtp-app .rtp-phase  { display: flex !important; flex-direction: column !important; }
.rtp-app .rtp-feedback-btn { position: absolute !important; top: 8px !important; right: 12px !important; width: auto !important; }
.rtp-app .rtp-help-btn     { display: inline-flex !important; }
.rtp-app .rtp-phase__substeps { display: flex !important; flex-wrap: nowrap !important; }

/* Header */
.rtp-header {
	background: linear-gradient(180deg, #4ea0ea 0%, #2c7bc7 100%);
	border-bottom: 1px solid #2168b0;
	color: var(--header-text);
	padding: 14px 18px 22px;
	display: flex; flex-direction: column; gap: 12px;
	position: relative;
}
/* Decorative wave at the bottom of the header band — color matches the page wash. */
.rtp-header__wave {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%;
	height: 18px;
	color: #f3f7fc; /* matches top of body wash */
	display: block;
	pointer-events: none;
}
.rtp-header__brand { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.rtp-wordmark {
	font-weight: 800;
	font-size: var(--text-2xl);
	line-height: 1;
}
/* Both halves white on the colored band — passes AA. The brand spec's two-tone
 * wordmark (saturated blue / warm gray) is contracted for white-bg surfaces,
 * not the gradient header. We honor it with weight contrast instead of color. */
.rtp-wordmark__reef  { color: #ffffff; font-weight: 800; }
.rtp-wordmark__dudes { color: #ffffff; font-weight: 500; opacity: 0.92; }
/* Header title stays sans on purpose — contrast with the wordmark's serif. */
.rtp-header__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Stepper — three phases (Build · Layout · Save), each containing sub-step
 * pills. The phase head reads as the dominant signal; sub-steps are
 * secondary. Cuts the 6-pill visual load to 3 readable groups while keeping
 * every step individually clickable. */
.rtp-phases {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px; /* room for focus rings */
}
.rtp-phase {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 0;
	scroll-snap-align: start;
	padding: 6px 10px 8px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	transition: background-color 160ms ease, border-color 160ms ease;
}
.rtp-phase.is-active {
	background: rgba(255,255,255,0.16);
	border-color: rgba(255,255,255,0.45);
}
.rtp-phase.is-done {
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.30);
}
.rtp-phase.is-future {
	opacity: 0.65;
}
.rtp-phase__head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
.rtp-phase__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255,255,255,0.18);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0;
}
.rtp-phase.is-active .rtp-phase__num {
	background: #ffffff;
	color: var(--accent);
}
.rtp-phase.is-done .rtp-phase__num::before {
	content: '✓';
	font-size: 0.85rem;
	color: var(--accent);
}
.rtp-phase.is-done .rtp-phase__num {
	background: #ffffff;
	color: transparent;
	font-size: 0; /* hide the number; checkmark is via ::before */
}
.rtp-phase__name {
	white-space: nowrap;
}
.rtp-phase__substeps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	flex-wrap: nowrap;
}
.rtp-phase__substeps li { display: contents; }
.rtp-step {
	background: rgba(255,255,255,0.10);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.20);
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 0.8rem;
	cursor: pointer;
	min-height: 32px;
	white-space: nowrap;
	transition: background-color 140ms ease, color 140ms ease;
}
.rtp-step:hover { background: rgba(255,255,255,0.20); }
.rtp-step.is-active {
	background: #ffffff;
	color: var(--accent);
	border-color: #ffffff;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.rtp-step.is-done {
	background: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.40);
	color: #ffffff;
	font-weight: 600;
}
.rtp-step.is-done::before {
	content: '✓';
	display: inline-block;
	margin-right: 5px;
	font-weight: 800;
	color: #c5e3ff;
}
.rtp-step.is-future {
	opacity: 0.70;
}
.rtp-step:focus-visible,
.rtp-phase:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Main panes */
.rtp-main { padding: 18px; }
.rtp-pane { display: none; }
.rtp-pane.is-active { display: block; }

.rtp-pane h2 {
	margin: 0 0 6px; color: var(--text); font-size: 1.4rem;
}
.rtp-help { color: var(--text-2); margin: 0 0 14px; }

/* Cards / grid */
.rtp-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
}
.rtp-card h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--text); }

.rtp-grid { display: grid; gap: 14px; }
.rtp-grid--2 { grid-template-columns: 1fr 1fr; }
.rtp-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Review pane: stats are narrower than warnings (warnings carry more text). */
[data-rtp-pane="review"] .rtp-grid--2 {
	grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
}
@media (max-width: 900px) {
	[data-rtp-pane="review"] .rtp-grid--2 { grid-template-columns: 1fr; }
}

/* Inputs */
.rtp-label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--text-2); gap: 4px; margin-bottom: 8px; }
.rtp-input, select.rtp-input, textarea.rtp-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #ffffff;
	color: var(--text);
	font: inherit;
}
.rtp-input:focus, select.rtp-input:focus, textarea.rtp-input:focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--accent);
}
.rtp-search { margin: 6px 0 14px; }
select.rtp-input option           { background: #ffffff; color: var(--text); }
select.rtp-input option:checked   { background: var(--accent-soft); color: var(--accent); }
select.rtp-input optgroup         { background: #f0f6f8; color: var(--accent); font-weight: 600; }

/* Buttons */
.rtp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--panel);
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s ease, background .12s ease;
}
.rtp-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rtp-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.rtp-btn--primary {
	background: linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%);
	border-color: #2872c0;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(28, 75, 130, 0.18);
}
.rtp-btn--primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%); color: #ffffff; }

.rtp-btn--ghost {
	background: transparent;
	border-color: var(--border);
	color: var(--text-2);
}

/* Green "added" state — signals "you already have this in your build". */
.rtp-btn--added {
	background: linear-gradient(180deg, #3aa080 0%, #2d8e6f 100%);
	border-color: #1d6450;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(20, 80, 62, 0.20);
}
.rtp-btn--added:hover {
	background: linear-gradient(180deg, #3aa080 0%, #2d8e6f 100%);
	color: #ffffff;
	border-color: #1d6450;
	filter: brightness(1.06);
}

/* Goal cards — 6-col grid so Mixed Reef can span 2, breaking monotony. */
.rtp-goals {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-3);
}
.rtp-goal {
	grid-column: span 2;
	text-align: left;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-height: 96px;
}
/* Mixed Reef gets prominence — it's the "most common" goal. */
.rtp-goal[data-rtp-goal="mixed"] {
	grid-column: span 3;
	background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
	border-color: rgba(58, 142, 224, 0.30);
}
.rtp-goal[data-rtp-goal="mixed"] strong::after {
	content: 'Most popular';
	display: inline-block;
	margin-left: var(--space-2);
	background: var(--coral);
	color: #ffffff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	vertical-align: middle;
}
/* FOWLR is the outlier (no corals) — give it a subtle treatment that signals "different lane". */
.rtp-goal[data-rtp-goal="fowlr"] {
	grid-column: span 3;
	background: var(--panel-2);
}
.rtp-goal strong { color: var(--text); font-size: 1rem; }
.rtp-goal span   { color: var(--text-2); font-size: 0.85rem; line-height: 1.4; }
.rtp-goal:hover  { border-color: var(--accent); }
.rtp-goal.is-active {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: 0 0 0 3px var(--focus-ring);
}
.rtp-goal[data-rtp-goal="mixed"].is-active {
	background: linear-gradient(180deg, var(--accent-soft) 0%, #d8e7f7 100%);
}
@media (max-width: 720px) {
	.rtp-goals { grid-template-columns: 1fr; }
	.rtp-goal,
	.rtp-goal[data-rtp-goal="mixed"],
	.rtp-goal[data-rtp-goal="fowlr"] { grid-column: span 1; }
}

/* Equipment mode toggle (Starter kit / Browse all) — sized as a secondary
 * path-switcher, not a peer to the kit hero. The kit is the dominant surface;
 * the toggle acts more like "or browse below" than a tab bar. */
.rtp-eq-mode {
	display: inline-flex;
	gap: 0;
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 3px;
	margin-bottom: var(--space-4);
}
.rtp-eq-mode__btn {
	background: transparent;
	border: 0;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	color: var(--text-2);
	font-weight: 600;
	font-size: var(--text-xs);
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
	min-height: 32px;
}
.rtp-eq-mode__btn.is-active {
	background: var(--panel);
	color: var(--accent);
	box-shadow: 0 1px 2px rgba(28, 75, 130, 0.10);
}
.rtp-eq-mode__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Starter kit hero — the dominant Step 3 surface. Newcomers should land here
 * and click one button. Browse-all is the escape hatch, not the default. */
.rtp-starter {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
	border: 1px solid rgba(58, 142, 224, 0.30);
	border-radius: var(--radius-lg, 14px);
	padding: var(--space-6, 28px) var(--space-5, 22px);
	margin-bottom: var(--space-4);
	box-shadow: 0 2px 12px rgba(28, 75, 130, 0.06);
}
.rtp-starter::before {
	content: "Recommended for you";
	position: absolute;
	top: -10px;
	left: var(--space-5, 22px);
	background: var(--accent);
	color: #ffffff;
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.rtp-starter__hello {
	font-size: var(--text-xs);
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	margin: 0 0 var(--space-1, 4px);
}
.rtp-starter__title {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 96, "SOFT" 100;
	font-size: var(--text-2xl, 1.85rem);
	font-weight: 700;
	margin: 0 0 var(--space-3);
	color: var(--text);
	line-height: 1.15;
}
.rtp-starter__sub {
	color: var(--text-2);
	margin: 0 0 var(--space-4);
	max-width: 60ch;
}
.rtp-starter__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.rtp-starter__item {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.rtp-starter__item-icon {
	flex: 0 0 32px;
	width: 32px; height: 32px;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	padding: 3px;
}
.rtp-starter__item-text { display: flex; flex-direction: column; min-width: 0; }
.rtp-starter__item-cat {
	font-size: var(--text-2xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.rtp-starter__item-name {
	font-size: var(--text-sm);
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rtp-starter__cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--space-2);
}
/* Hero CTA — meaningfully larger than baseline buttons so the recommended
 * one-click path reads as the dominant action on the page. */
.rtp-starter__cta .rtp-btn--primary {
	font-size: var(--text-md);
	padding: 12px 20px;
	min-height: 48px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.rtp-starter__note { color: var(--muted); font-size: var(--text-xs); flex: 1 1 220px; }
.rtp-starter--applied {
	background: linear-gradient(180deg, rgba(45, 142, 111, 0.06) 0%, rgba(45, 142, 111, 0.16) 100%);
	border-color: rgba(45, 142, 111, 0.30);
}

/* Equipment page two-column layout — main browser left, selected gear sidebar right. */
.rtp-eq-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--space-5);
	align-items: start;
}
.rtp-eq-main { min-width: 0; }
.rtp-eq-layout .rtp-selected {
	position: sticky;
	top: var(--space-4);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}
.rtp-selected h3 {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}
.rtp-selected__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--accent);
	color: #ffffff;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 700;
	font-family: var(--font-body);
}
.rtp-selected__count[data-empty="true"] {
	background: var(--border-strong);
	color: #ffffff;
}

/* Equipment list */
.rtp-equipment-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rtp-eq-tab {
	padding: 6px 12px;
	background: var(--panel);
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.85rem;
}
.rtp-eq-tab.is-active { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.rtp-equipment-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}
/* Sub-heading inside a category browse — used to split controllers into
 * tank-controllers vs heater-controllers so a $300 Apex doesn't sit in
 * the same flat list as a $35 Inkbird. The block spans every column of
 * the auto-fill grid so subsequent cards reflow under the heading. */
.rtp-eq-subhead {
	grid-column: 1 / -1;
	margin: var(--space-3) 0 0;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border);
}
.rtp-eq-subhead:first-child { margin-top: 0; }
.rtp-eq-subhead__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.02em;
}
.rtp-eq-subhead__sub {
	margin: 2px 0 0;
	color: var(--text-2);
	font-size: var(--text-xs);
	max-width: 60ch;
	line-height: 1.4;
}
.rtp-eq-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px;
	display: flex; flex-direction: column; gap: 6px;
	position: relative;
}
.rtp-eq-card[data-recommended="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent-soft) inset;
}
.rtp-eq-card[data-recommended="true"]::after {
	content: "Recommended";
	position: absolute; top: -8px; right: 10px;
	background: var(--coral); color: #ffffff;
	font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
}
/* Card "in your build" treatment — left rail in semantic green. */
.rtp-eq-card--added {
	border-color: var(--good);
	box-shadow: inset 4px 0 0 var(--good);
}
/* Card "may not fit your sump" treatment — amber rail + warning chip. */
.rtp-eq-card--may-not-fit {
	border-color: var(--warn, #d97706);
}
.rtp-eq-card--may-not-fit.rtp-eq-card--added {
	box-shadow: inset 4px 0 0 var(--warn, #d97706);
}
.rtp-eq-card__fit-warn {
	display: block;
	margin-top: 6px;
	padding: 6px 10px;
	background: rgba(217, 119, 6, 0.10);
	color: var(--warn, #b45309);
	border-left: 3px solid var(--warn, #d97706);
	border-radius: 4px;
	font-size: var(--text-xs);
	line-height: 1.35;
	font-weight: 600;
}
/* Light recommendation badge — tells the user how many of this fixture
 * they'd actually need to cover their tank at their goal. Quiet info tone. */
.rtp-eq-card__rec-qty {
	display: block;
	margin-top: 6px;
	padding: 6px 10px;
	background: var(--accent-soft, rgba(58, 142, 224, 0.08));
	color: var(--accent);
	border-left: 3px solid var(--accent);
	border-radius: 4px;
	font-size: var(--text-xs);
	line-height: 1.35;
	font-weight: 600;
}
.rtp-eq-card__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	background: var(--good);
	color: #ffffff;
	border: 0;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 700;
	font-family: var(--font-body);
	margin-left: auto;
	flex: 0 0 auto;
	cursor: pointer;
	transition: background-color 140ms ease, transform 100ms ease;
}
.rtp-eq-card__count:hover,
.rtp-eq-card__count:focus-visible {
	background: var(--coral);
	outline: none;
}
.rtp-eq-card__count:hover::before,
.rtp-eq-card__count:focus-visible::before {
	content: "Remove ";
	margin-right: 2px;
	font-weight: 600;
}
.rtp-eq-card__count:active {
	transform: scale(0.94);
}
.rtp-eq-card h3 {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.25;
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0;
}
.rtp-eq-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rtp-eq-card__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	background: var(--accent-soft);
	border-radius: 8px;
	color: var(--accent);
	padding: 4px;
}
.rtp-eq-card[data-recommended="true"] .rtp-eq-card__icon {
	background: rgba(255, 126, 98, 0.12);
	color: var(--coral);
}
.rtp-eq-card .rtp-eq-meta { color: var(--muted); font-size: 0.8rem; }
.rtp-eq-card .rtp-eq-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rtp-eq-qty {
	min-width: 0;
	padding: 9px 12px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: var(--text-sm);
}

.rtp-selected {
	background: var(--accent-soft);
	border: 1px solid rgba(58,142,224,0.30);
	border-radius: 12px;
	padding: 12px;
}
/* Selected gear: chips, not a bulleted list. Reads as a roster of objects. */
.rtp-selected ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.rtp-selected li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--panel);
	border: 1px solid rgba(58, 142, 224, 0.30);
	border-radius: var(--radius-pill);
	padding: 4px 4px 4px 12px;
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 500;
}
.rtp-selected li.is-empty {
	background: transparent;
	border: 1px dashed var(--border-strong);
	color: var(--muted);
	font-style: italic;
}
.rtp-selected button {
	background: var(--panel-2);
	border: 0;
	color: var(--muted);
	cursor: pointer;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .12s ease, color .12s ease;
}
.rtp-selected button:hover {
	background: var(--error);
	color: #ffffff;
}
.rtp-selected button:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Layout / canvas */
.rtp-view-toggle {
	display: flex;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
	flex-wrap: wrap;
}
.rtp-view {
	flex: 1 1 100px;
	min-width: 80px;
	min-height: 44px;
	background: var(--panel);
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 8px 14px;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--text-sm);
}
.rtp-view:hover  { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rtp-view.is-active {
	background: var(--accent);
	color: #ffffff;
	border-color: var(--accent);
	box-shadow: 0 1px 3px rgba(28, 75, 130, 0.18);
}
.rtp-view:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.rtp-canvas-tools {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	padding: 8px 0;
}
.rtp-toggle { color: var(--text-2); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }

/* Outbound link to the ReefDudes PAR estimator. Sits next to the
 * "Light coverage" toggle, reads as a clickable link rather than a label. */
.rtp-par-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.30);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease;
}
.rtp-par-link:hover,
.rtp-par-link:focus-visible {
	background: rgba(58, 142, 224, 0.18);
	border-color: var(--accent);
	outline: none;
}
.rtp-par-link:focus-visible {
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.rtp-canvas-wrap {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	padding: 8px;
}
.rtp-canvas {
	width: 100%; height: auto; display: block;
	background: linear-gradient(180deg, #f3f7fc 0%, #e3eef9 100%);
	border-radius: 8px;
	touch-action: none;
}
.rtp-canvas .rtp-tank-glass { fill: rgba(90, 166, 232, 0.10); stroke: var(--text); stroke-width: 2; }
.rtp-canvas .rtp-water       { fill: rgba(58, 142, 224, 0.18); }
.rtp-canvas .rtp-water-line  { stroke: none; }
.rtp-canvas .rtp-caustics    { mix-blend-mode: screen; opacity: 0.65; pointer-events: none; }
.rtp-canvas .rtp-stand       { fill: var(--bg-2); stroke: var(--border-strong); stroke-width: 1.5; }
.rtp-canvas .rtp-overflow    { fill: rgba(28, 51, 68, 0.08); stroke: var(--text-2); stroke-dasharray: 2 2; }
.rtp-canvas .rtp-item        { cursor: grab; }
.rtp-canvas .rtp-item:active { cursor: grabbing; }
.rtp-canvas .rtp-item-rect   { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.rtp-canvas .rtp-item-label  { fill: var(--text); font-size: 11px; font-weight: 600; pointer-events: none; }
.rtp-canvas .rtp-item--warn .rtp-item-rect { stroke: var(--error); }
.rtp-canvas .rtp-item--selected .rtp-item-rect {
	stroke-width: 3;
	filter: drop-shadow(0 0 6px var(--focus-ring));
}
.rtp-canvas .rtp-item-icon,
.rtp-canvas .rtp-item-silhouette {
	color: var(--accent);
	transition: color .12s ease;
	pointer-events: none;
}
.rtp-canvas .rtp-item:hover .rtp-item-icon,
.rtp-canvas .rtp-item:hover .rtp-item-silhouette { color: var(--accent-hover); }
.rtp-canvas .rtp-item--warn .rtp-item-icon,
.rtp-canvas .rtp-item--warn .rtp-item-silhouette { color: var(--error); }
.rtp-canvas .rtp-item--selected .rtp-item-icon,
.rtp-canvas .rtp-item--selected .rtp-item-silhouette { color: var(--accent-hover); }

/* Drop-settle: brief overshoot when an item is released after a drag.
 * Gated by prefers-reduced-motion below so vestibular-sensitive users see no motion. */
@keyframes rtp-settle {
	0%   { transform: scale(1.08); }
	60%  { transform: scale(0.98); }
	100% { transform: scale(1); }
}
.rtp-canvas .rtp-item--settling > g {
	animation: rtp-settle 320ms cubic-bezier(0.25, 1, 0.5, 1);
	transform-origin: center;
	transform-box: fill-box;
}

/* Subtle button-press feedback. */
.rtp-btn:active { transform: translateY(1px); }
.rtp-goal:active { transform: scale(0.985); }
/* PAR coverage overlay — warm yellow tint (high PAR) with a soft actinic
 * outline. Visible enough to communicate "this is where the light lands"
 * without obscuring the gear silhouettes underneath. */
.rtp-canvas .rtp-light-cone {
	fill: rgba(255, 196, 64, 0.22);
	stroke: rgba(90, 166, 232, 0.55);
	stroke-width: 1.2;
	stroke-dasharray: 4 3;
	pointer-events: none;
}
.rtp-canvas .rtp-canvas-caption { pointer-events: none; opacity: 0.85; }
.rtp-canvas .rtp-flow-arrow  { stroke: var(--coral); stroke-width: 2; fill: none; marker-end: url(#rtp-arrowhead); }
.rtp-canvas .rtp-handle      { fill: var(--accent); cursor: ew-resize; }

/* Stats / warnings */

/* Hero: tank + goal, scannable at a glance, sets context for everything below. */
.rtp-stats-hero {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}
.rtp-stats-hero__tank { font-weight: 700; color: var(--text); font-size: 1rem; }
.rtp-stats-hero__sub  { color: var(--muted); font-size: 0.85rem; }

/* Grouped stats — Volume / Heat / Flow / Light. Group label is small caps,
 * rows inside are tight (var(--space-2)), and groups are separated by a wider gap. */
.rtp-stat-groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.rtp-stat-group__title {
	margin: 0 0 var(--space-2);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.rtp-stat-group__rows {
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: var(--space-2);
	column-gap: var(--space-3);
}
.rtp-stat-group__rows dt { color: var(--text-2); font-size: 0.85rem; }
.rtp-stat-group__rows dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.rtp-stat-group__rows dd[data-tone="warn"]  { color: var(--warn); }
.rtp-stat-group__rows dd[data-tone="error"] { color: var(--error); }
.rtp-stat-group__rows dd[data-tone="good"]  { color: var(--good); }

/* Warnings list — pill leads each line; body text stays in --text for readability.
 * Colored bullets create anxiety; pillified labels containerize the signal. */
.rtp-warnings {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.rtp-warnings li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	flex-wrap: wrap;
	padding: var(--space-2) 0;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}
.rtp-warnings li:last-child { border-bottom: 0; }
.rtp-warnings li > .rtp-pill { flex: 0 0 auto; margin-top: 2px; }

/* Pills */
.rtp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; line-height: 1.4; }
/* Pill text deepened from the brand-spec saturated hues to clear AA on the 0.18α bg.
 * Spec said "saturated"; we keep the saturation while pulling lightness down for contrast. */
.rtp-pill--good  { background: rgba(45, 142, 111, 0.18); color: #14503e; border: 1px solid rgba(45, 142, 111, 0.45); }
.rtp-pill--warn  { background: rgba(196, 122, 28, 0.18); color: #6f4115; border: 1px solid rgba(196, 122, 28, 0.45); }
.rtp-pill--error { background: rgba(196, 74, 74, 0.18);  color: #6f2424; border: 1px solid rgba(196, 74, 74, 0.45); }
.rtp-pill--info  { background: var(--accent-soft);       color: var(--accent); border: 1px solid rgba(58, 142, 224, 0.45); }

/* Step 6 — build-sheet poster + export actions.
 * The buildsheet IS the artifact. Actions sit below as secondary chrome. */
.rtp-buildsheet-wrap {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
	overflow: hidden;
}
.rtp-buildsheet { display: block; }
.rtp-buildsheet svg { display: block; width: 100%; height: auto; }
.rtp-buildsheet--empty {
	min-height: 240px;
	display: flex; align-items: center; justify-content: center;
	color: var(--muted);
	font-style: italic;
}
.rtp-export-more {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}
.rtp-export-more summary {
	cursor: pointer;
	color: var(--text-2);
	font-weight: 600;
	font-size: var(--text-sm);
	padding: var(--space-2) 0;
	user-select: none;
}
.rtp-export-more summary:hover { color: var(--accent); }
.rtp-export-more[open] summary { color: var(--accent); }

/* Export pane — summary is content inside the card, not a nested container.
 * Drop the inner background/border that was causing the card-in-card detector hit. */
.rtp-export-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.rtp-summary {
	background: transparent;
	border: 0;
	border-top: 1px dashed var(--border);
	border-radius: 0;
	padding: var(--space-4) 0 0;
	margin: 0;
	font: var(--text-sm)/1.55 ui-monospace, "SFMono-Regular", Menlo, monospace;
	color: var(--text-2);
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 60vh; overflow: auto;
}
.rtp-disclaimer { color: var(--muted); font-size: 0.8rem; margin-top: 10px; }

/* Tooltip — pure CSS */
.rtp-tip {
	display: inline-block;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid rgba(58, 142, 224, 0.30);
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	cursor: help;
	position: relative;
}
.rtp-tip::before {
	/* Caret pointing up at the tip. Same color as the tooltip body. */
	content: '';
	position: absolute;
	top: calc(100% + 1px);
	left: 14px;
	width: 0; height: 0;
	border: 5px solid transparent;
	border-bottom-color: var(--text);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 6;
}
.rtp-tip::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 11px);
	left: 0;
	background: var(--text);
	color: #ffffff;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	width: max-content;
	max-width: 240px;
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.45;
	z-index: 5;
	white-space: normal;
	opacity: 0;
	transform: translateY(-3px);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	box-shadow: 0 4px 12px rgba(28, 75, 130, 0.18);
}
.rtp-tip:hover::before,
.rtp-tip:focus::before,
.rtp-tip:hover::after,
.rtp-tip:focus::after {
	opacity: 1;
	transform: translateY(0);
	pointer-events: none;
}

/* Inline reef-jargon term — same tooltip behavior as .rtp-tip but rendered
 * inline-flow with a dotted underline instead of a pill. Used inside
 * warnings, help text, and meta where we don't want every defined term to
 * become a visual chip. */
.rtp-term {
	display: inline;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	border-bottom: 1px dotted var(--accent);
	cursor: help;
	position: relative;
	font: inherit;
	text-decoration: none;
}
.rtp-term::before {
	content: '';
	position: absolute;
	top: calc(100% + 1px);
	left: 6px;
	width: 0; height: 0;
	border: 5px solid transparent;
	border-bottom-color: var(--text);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 6;
}
.rtp-term::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 11px);
	left: 0;
	background: var(--text);
	color: #ffffff;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	width: max-content;
	max-width: 280px;
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.45;
	z-index: 5;
	white-space: normal;
	opacity: 0;
	transform: translateY(-3px);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	box-shadow: 0 4px 12px rgba(28, 75, 130, 0.18);
}
.rtp-term:hover::before,
.rtp-term:focus::before,
.rtp-term:hover::after,
.rtp-term:focus::after {
	opacity: 1;
	transform: translateY(0);
}
.rtp-term:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

.rtp-footer {
	background: var(--panel-2);
	border-top: 1px solid var(--border);
	padding: 10px 18px;
	color: var(--muted);
	text-align: center;
}

/* Form hints + inline errors (replace native alerts for validation) */
.rtp-form-hint {
	margin: 12px 0 4px;
	color: var(--text-2);
	font-size: 0.85rem;
	font-weight: 600;
}
.rtp-form-hint .rtp-tip { font-weight: 400; margin-left: 4px; }
.rtp-form-error {
	background: rgba(196, 74, 74, 0.10);
	color: #8a2d2d;
	border: 1px solid rgba(196, 74, 74, 0.45);
	padding: 8px 12px;
	border-radius: 8px;
	margin: 10px 0;
	font-size: 0.85rem;
}

/* Per-category one-line help under equipment tabs */
.rtp-eq-cat-help {
	margin: 0 0 12px;
	color: var(--text-2);
	font-size: 0.85rem;
	min-height: 1.2em;
}

/* Pane navigation: sticky bar at the bottom of every pane */
.rtp-pane-nav {
	display: none;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 4px;
	margin-top: 16px;
	border-top: 1px solid var(--border);
}
.rtp-pane-nav.is-active { display: flex; }
.rtp-pane-nav__reason {
	flex: 1;
	text-align: center;
	color: var(--muted);
	font-size: 0.85rem;
}
.rtp-pane-nav .rtp-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--panel);
	color: var(--text-2);
	border-color: var(--border);
	box-shadow: none;
	background-image: none;
}
.rtp-pane-nav .rtp-btn[disabled]:hover {
	background: var(--panel);
	color: var(--text-2);
	border-color: var(--border);
}

/* Toast — single floating banner replacing native alerts */
.rtp-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background: var(--text);
	color: #ffffff;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(28, 75, 130, 0.25);
	z-index: 9999;
	max-width: calc(100% - 32px);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.rtp-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.rtp-toast[data-level="good"]  { background: var(--good);  }
.rtp-toast[data-level="warn"]  { background: var(--warn);  }
.rtp-toast[data-level="error"] { background: var(--error); }
.rtp-toast[data-level="info"]  { background: var(--accent); }
.rtp-toast__undo {
	background: rgba(255,255,255,0.18);
	border: 1px solid rgba(255,255,255,0.35);
	color: #ffffff;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	margin-left: var(--space-3);
	font-weight: 700;
	cursor: pointer;
	pointer-events: auto;
	font-size: var(--text-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.rtp-toast__undo:hover { background: rgba(255,255,255,0.32); }
.rtp-toast.is-visible .rtp-toast__undo { pointer-events: auto; }

/* Warning body: pill on the left, text + optional fix button after. */
.rtp-warnings__text {
	flex: 1 1 200px;
	color: var(--text);
	line-height: 1.45;
}
.rtp-warnings__fix {
	display: inline-block;
	margin-left: var(--space-2);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.45);
	color: var(--accent);
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.rtp-warnings__fix:hover { background: var(--accent); color: #ffffff; }
.rtp-warnings__fix:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Tap hint (mobile only) */
.rtp-tap-hint {
	display: none;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid rgba(58, 142, 224, 0.30);
	border-radius: 8px;
	padding: 6px 10px;
	margin: 6px 0 0;
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ *
 * Responsive — phone / tablet
 * ------------------------------------------------------------------ */

/* Tablet: collapse 2- and 3-column grids + the equipment sidebar stack. */
@media (max-width: 900px) {
	.rtp-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.rtp-eq-layout { grid-template-columns: 1fr; }
	.rtp-eq-layout .rtp-selected {
		position: sticky;
		top: auto;
		bottom: var(--space-2);
		max-height: 35vh;
	}
}

/* Phone */
@media (max-width: 720px) {
	.rtp-app { margin: 0.75rem 0.5rem; border-radius: 10px; }

	/* Header tightens; phase stepper scroll-snaps one phase at a time. */
	.rtp-header { padding: 10px 12px; gap: 8px; }
	.rtp-header__brand { gap: 8px; }
	.rtp-wordmark { font-size: var(--text-xl); }
	.rtp-header__title { font-size: var(--text-2xs); }
	.rtp-phases {
		scroll-snap-type: x mandatory;
		gap: 8px;
		margin: 0 -4px;
		padding: 0 4px 4px;
		scrollbar-width: thin;
	}
	.rtp-phase {
		min-width: 75%;
		flex: 0 0 auto;
		padding: 6px 10px 8px;
	}
	.rtp-phase__head { font-size: 0.74rem; }
	.rtp-step {
		font-size: 0.78rem;
		padding: 8px 12px;
		min-height: 40px;
	}

	.rtp-main { padding: 12px; }
	.rtp-pane h2 { font-size: 1.15rem; margin-bottom: 4px; }

	/* All grid layouts collapse to single column. */
	.rtp-grid--2, .rtp-grid--3 { grid-template-columns: 1fr; }

	/* Buttons: chunkier touch targets. */
	.rtp-btn { min-height: 44px; padding: 10px 14px; }

	/* Equipment grid: snug single column; tabs scroll horizontally. */
	.rtp-equipment-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		margin: 0 -4px;
		padding: 0 4px 4px;
	}
	.rtp-eq-tab { flex: 0 0 auto; min-height: 40px; }
	.rtp-equipment-list { grid-template-columns: 1fr; }
	/* Selected gear sticks to bottom so it stays reachable while scrolling cards. */
	.rtp-selected {
		position: sticky;
		bottom: 8px;
		max-height: 35vh;
		overflow-y: auto;
		box-shadow: 0 -2px 12px rgba(28, 75, 130, 0.10);
	}

	/* LAYOUT (peak) — minimize chrome above the canvas, give the canvas presence. */
	[data-rtp-pane="layout"] > h2 { display: none; } /* redundant with active step pill */
	[data-rtp-pane="layout"] > .rtp-help { display: none; } /* surfaced via tap-hint instead */
	.rtp-view {
		flex: 1 1 calc(50% - var(--space-1));
		padding: 10px 12px;
		font-size: var(--text-sm);
	}

	/* Canvas tools: compact 2-row toolbar, tighter type, reset on its own row. */
	.rtp-canvas-tools {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		padding: 6px 0;
	}
	.rtp-canvas-tools .rtp-toggle { font-size: 0.85rem; }
	.rtp-canvas-tools .rtp-btn { grid-column: 1 / -1; }

	/* Canvas: claim ~60vh — this is the peak step. */
	.rtp-canvas-wrap { padding: 4px; }
	.rtp-canvas {
		min-height: 60vh;
		max-height: 70vh;
	}

	/* Tap hint visible on phones. */
	.rtp-tap-hint { display: block; }

	/* Export buttons: stack so each is full-width and tappable. */
	.rtp-export-actions { flex-direction: column; }
	.rtp-export-actions .rtp-btn { width: 100%; }
	.rtp-summary { font-size: 0.78rem; max-height: 50vh; }

	/* Stats: keep single column — no cramped 2-col on phone. */
	.rtp-stats { grid-template-columns: 1fr; }
}

/* Reduced motion — disable all decorative motion. SVG SMIL animations are
 * dropped at runtime by the JS via the same media-query check. */
@media (prefers-reduced-motion: reduce) {
	.rtp-canvas .rtp-item--settling > g { animation: none; }
	.rtp-btn:active { transform: none; }
	.rtp-goal:active { transform: none; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------- *
 * Vendor pills (BRS / SWA / Amazon) + Shopping list
 *
 * Vendor pills appear two places: equipment cards (Step 3) and shopping
 * list rows (Step 6). Same look in both. Brand-colored when we know the
 * vendor (orange for BRS, teal for SWA, dark for Amazon), neutral
 * otherwise. Subtle enough not to compete with the Add button.
 * --------------------------------------------------------------------- */
.rtp-vendor-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--text);
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.rtp-vendor-pill:hover,
.rtp-vendor-pill:focus-visible {
	background: var(--panel-2);
	border-color: var(--accent);
	outline: none;
}
.rtp-vendor-pill:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.rtp-vendor-pill:active { transform: scale(0.96); }
.rtp-vendor-pill::after {
	content: "↗";
	font-size: 0.85em;
	opacity: 0.7;
}
/* BRS — orange brand color, used as the dominant pill since they're the
 * largest reef-specialty retailer and most users will recognize it. */
.rtp-vendor-pill--brs {
	background: #ff7a1a;
	border-color: #e0660a;
	color: #ffffff;
}
.rtp-vendor-pill--brs:hover,
.rtp-vendor-pill--brs:focus-visible { background: #e0660a; border-color: #b85408; }
/* SWA — SaltwaterAquarium.com teal. */
.rtp-vendor-pill--swa {
	background: #1f7a8c;
	border-color: #155b6a;
	color: #ffffff;
}
.rtp-vendor-pill--swa:hover,
.rtp-vendor-pill--swa:focus-visible { background: #155b6a; border-color: #0e424d; }
/* Amazon — dark with pale gold accent; instantly recognizable, doesn't
 * fight the brand palette. */
.rtp-vendor-pill--amazon {
	background: #232f3e;
	border-color: #131a21;
	color: #ff9900;
}
.rtp-vendor-pill--amazon:hover,
.rtp-vendor-pill--amazon:focus-visible { background: #131a21; border-color: #000000; }

/* Search-fallback variant — when no admin-authored direct affiliate URL
 * exists, the pill links to the vendor's search results for the product.
 * Visually softened (opacity + lighter weight) so direct affiliate links
 * read as the preferred path. The ::after glyph stays "↗" — both kinds
 * are still outbound links; only the destination differs. */
.rtp-vendor-pill--search {
	opacity: 0.80;
	font-weight: 600;
}
.rtp-vendor-pill--search:hover,
.rtp-vendor-pill--search:focus-visible { opacity: 1; }

/* Shopping list (Step 6) — flat list of build items with vendor pills. */
.rtp-shopping {
	margin-top: var(--space-5);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.rtp-shopping[hidden] { display: none; }
.rtp-shopping__head h3 {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
}
.rtp-shopping__sub {
	margin: 0 0 var(--space-2);
	color: var(--text-2);
	font-size: var(--text-sm);
	max-width: 70ch;
}
/* FTC-style affiliate disclaimer — required-ish text rendered quietly so
 * it informs without dominating. Italic + muted, slightly smaller than
 * the brand-list line above it. */
.rtp-shopping__disclaimer {
	margin: 0 0 var(--space-3);
	color: var(--muted);
	font-size: var(--text-xs);
	font-style: italic;
	max-width: 70ch;
}
.rtp-shopping__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
}
.rtp-shopping__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.rtp-shopping__left {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 1 1 280px;
	min-width: 0;
}
.rtp-shopping__icon {
	flex: 0 0 32px;
	width: 32px; height: 32px;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	padding: 3px;
}
.rtp-shopping__text { display: flex; flex-direction: column; min-width: 0; }
.rtp-shopping__name {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 600;
	color: var(--text);
}
.rtp-shopping__qty {
	display: inline-block;
	background: var(--accent);
	color: #ffffff;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 800;
	flex: 0 0 auto;
}
.rtp-shopping__brand {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rtp-shopping__cat {
	color: var(--muted);
	font-size: var(--text-xs);
	margin-top: 2px;
}
.rtp-shopping__vendors {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}
.rtp-shopping__no-link {
	color: var(--muted);
	font-size: var(--text-xs);
	font-style: italic;
}

/* --------------------------------------------------------------------- *
 * Reef-term tooltips — dotted underline + cursor:help on the .rtp-term
 * spans inserted by termFragment(). Keeps inline jargon scannable: a
 * newcomer can hover/tap any underlined term to see its plain-English
 * definition without leaving the warning they're reading.
 * --------------------------------------------------------------------- */
.rtp-term {
	border-bottom: 1px dotted var(--accent);
	cursor: help;
	text-decoration: none;
}
.rtp-term:hover { background: var(--accent-soft); }

/* --------------------------------------------------------------------- *
 * Help button (?) + slide-in help panel
 *
 * The ? button lives in the header brand row. The panel slides in from
 * the right and dims the rest of the page via .rtp-help-scrim. The same
 * panel surfaces glossary, FAQ, and keyboard shortcuts in one place so
 * newcomers have a single learning surface.
 * --------------------------------------------------------------------- */
.rtp-help-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 140ms ease, transform 100ms ease;
}
.rtp-help-btn:hover,
.rtp-help-btn:focus-visible {
	background: rgba(255, 255, 255, 0.32);
	outline: none;
}
.rtp-help-btn:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.rtp-help-btn:active { transform: scale(0.94); }

.rtp-help-scrim {
	position: fixed;
	inset: 0;
	background: rgba(15, 30, 45, 0.32);
	z-index: 90;
	animation: rtp-help-fade 160ms ease both;
}
.rtp-help-scrim[hidden] { display: none; }

.rtp-help-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 92vw);
	background: var(--panel);
	box-shadow: -8px 0 32px rgba(28, 75, 130, 0.18);
	z-index: 100;
	display: flex;
	flex-direction: column;
	animation: rtp-help-slide 200ms ease both;
	overflow: hidden;
}
.rtp-help-panel[hidden] { display: none; }
@keyframes rtp-help-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rtp-help-slide {
	from { transform: translateX(20px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.rtp-help-scrim, .rtp-help-panel { animation: none; }
}
.rtp-help-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	border-bottom: 1px solid var(--border);
	background: var(--panel-2);
}
.rtp-help-panel__head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text);
}
.rtp-help-panel__close {
	background: transparent;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--text-2);
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	transition: background-color 140ms ease;
}
.rtp-help-panel__close:hover,
.rtp-help-panel__close:focus-visible {
	background: var(--panel);
	color: var(--text);
	outline: none;
}
.rtp-help-panel__close:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.rtp-help-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4);
	-webkit-overflow-scrolling: touch;
}
.rtp-help-section + .rtp-help-section {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
}
.rtp-help-section h3 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Shortcut table — kbd glyphs + plain-English description. */
.rtp-help-shortcuts {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr;
	column-gap: var(--space-3);
	row-gap: 8px;
	margin: 0;
}
.rtp-help-shortcuts dt {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-items: center;
}
.rtp-help-shortcuts dd {
	margin: 0;
	color: var(--text-2);
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
}
.rtp-help-shortcuts kbd {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: var(--text-xs);
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--text);
	min-width: 22px;
	text-align: center;
}
/* FAQ — collapsible details. */
.rtp-help-section details {
	margin-bottom: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--panel-2);
}
.rtp-help-section details summary {
	padding: 10px 12px;
	cursor: pointer;
	font-weight: 600;
	color: var(--text);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.rtp-help-section details summary::-webkit-details-marker { display: none; }
.rtp-help-section details summary::before {
	content: "›";
	display: inline-block;
	transition: transform 120ms ease;
	color: var(--accent);
	font-weight: 800;
}
.rtp-help-section details[open] summary::before { transform: rotate(90deg); }
.rtp-help-section details p {
	margin: 0;
	padding: 0 12px 12px 24px;
	color: var(--text-2);
	font-size: var(--text-sm);
	line-height: 1.5;
}
/* Glossary — dt/dd flow with the term in accent color. */
.rtp-help-glossary {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-3);
}
.rtp-help-glossary dt {
	font-weight: 700;
	color: var(--accent);
	font-size: var(--text-sm);
}
.rtp-help-glossary dd {
	margin: 4px 0 0;
	color: var(--text-2);
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* --------------------------------------------------------------------- *
 * Light-tools group — keeps the "Light coverage" toggle and the "PAR
 * tool ↗" link visually paired so the link's target (the toggle's
 * companion estimator) reads as a single unit on mobile.
 * --------------------------------------------------------------------- */
.rtp-light-tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

/* --------------------------------------------------------------------- *
 * Feedback button + modal
 *
 * The triangle/exclaim button lives absolute top-right of the header bar.
 * Faint by default (white at 35% opacity) so it sits as a quiet utility,
 * not a primary action. Hover/focus brightens to nearly full white.
 *
 * Click opens a centered modal with the bundled contact-form-7 shortcode
 * pre-rendered inside. Same close affordances as the help panel: × button,
 * scrim click, or Esc.
 * --------------------------------------------------------------------- */
.rtp-header { position: relative; } /* anchor for the absolute feedback btn */
.rtp-feedback-btn {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 5;
	background: transparent;
	border: 0;
	padding: 6px;
	color: rgba(255, 255, 255, 0.42);
	cursor: pointer;
	border-radius: 4px;
	line-height: 0; /* drop the inline-baseline gap so the SVG sits flush */
	transition: color 160ms ease, background-color 160ms ease, transform 100ms ease;
}
.rtp-feedback-btn:hover,
.rtp-feedback-btn:focus-visible {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.10);
	outline: none;
}
.rtp-feedback-btn:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.rtp-feedback-btn:active { transform: scale(0.94); }
.rtp-feedback-btn svg { display: block; width: 20px; height: 20px; }

/* Centered modal — different shape from the help panel (which slides in
 * from the right). Centering signals "this is a discrete task" rather
 * than "this is a reference panel". */
.rtp-feedback-scrim {
	position: fixed;
	inset: 0;
	background: rgba(15, 30, 45, 0.40);
	z-index: 90;
	animation: rtp-feedback-fade 160ms ease both;
}
.rtp-feedback-scrim[hidden] { display: none; }
.rtp-feedback-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, 92vw);
	max-height: 86vh;
	background: var(--panel);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 40px rgba(28, 75, 130, 0.28);
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: rtp-feedback-pop 200ms ease both;
}
.rtp-feedback-modal[hidden] { display: none; }
@keyframes rtp-feedback-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rtp-feedback-pop {
	from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
	to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.rtp-feedback-scrim, .rtp-feedback-modal { animation: none; }
}
.rtp-feedback-modal__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0; /* lets the body scroll instead of overflowing the panel */
}
.rtp-feedback-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	border-bottom: 1px solid var(--border);
	background: var(--panel-2);
}
.rtp-feedback-modal__head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text);
}
.rtp-feedback-modal__close {
	background: transparent;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--text-2);
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	transition: background-color 140ms ease;
}
.rtp-feedback-modal__close:hover,
.rtp-feedback-modal__close:focus-visible {
	background: var(--panel);
	color: var(--text);
	outline: none;
}
.rtp-feedback-modal__close:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.rtp-feedback-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--space-4);
	-webkit-overflow-scrolling: touch;
}
/* Reset Contact Form 7 defaults so the form inherits planner typography
 * instead of bare browser styles. CF7 emits very little CSS itself; the
 * form fields and submit button look right with these tweaks. */
.rtp-feedback-modal__body .wpcf7 { margin: 0; }
.rtp-feedback-modal__body .wpcf7-form p { margin: 0 0 var(--space-3); }
.rtp-feedback-modal__body .wpcf7-form label {
	display: block;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 4px;
}
.rtp-feedback-modal__body .wpcf7-form input[type="text"],
.rtp-feedback-modal__body .wpcf7-form input[type="email"],
.rtp-feedback-modal__body .wpcf7-form input[type="url"],
.rtp-feedback-modal__body .wpcf7-form textarea,
.rtp-feedback-modal__body .wpcf7-form select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	background: var(--panel-2);
	color: var(--text);
}
.rtp-feedback-modal__body .wpcf7-form input:focus,
.rtp-feedback-modal__body .wpcf7-form textarea:focus,
.rtp-feedback-modal__body .wpcf7-form select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focus-ring);
}
.rtp-feedback-modal__body .wpcf7-form textarea { min-height: 120px; resize: vertical; }
.rtp-feedback-modal__body .wpcf7-form .wpcf7-submit {
	background: var(--accent);
	color: #ffffff;
	border: 0;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: var(--text-md);
	cursor: pointer;
	min-height: 44px;
	transition: background-color 140ms ease;
}
.rtp-feedback-modal__body .wpcf7-form .wpcf7-submit:hover,
.rtp-feedback-modal__body .wpcf7-form .wpcf7-submit:focus-visible {
	background: var(--accent-dark, #2876bf);
	outline: none;
}
.rtp-feedback-modal__body .wpcf7-response-output {
	margin-top: var(--space-3);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}
.rtp-feedback-fallback {
	margin: 0;
	color: var(--text-2);
	font-size: var(--text-sm);
}

/* Print — emit only the build sheet from Step 6. The wizard chrome and other
 * panes don't belong on paper; the user wants the artifact, not the tool. */
@media print {
	.rtp-app { box-shadow: none; border: 0; background: #ffffff; max-width: none; margin: 0; }
	.rtp-header, .rtp-header__wave, .rtp-phases, .rtp-view-toggle,
	.rtp-canvas-tools, .rtp-export-actions, .rtp-footer, .rtp-tap-hint,
	.rtp-pane-nav, .rtp-pane h2, .rtp-pane > .rtp-help, .rtp-export-more, .rtp-disclaimer,
	.rtp-help-btn, .rtp-help-panel, .rtp-help-scrim, .rtp-shopping,
	.rtp-feedback-btn, .rtp-feedback-modal, .rtp-feedback-scrim { display: none !important; }
	.rtp-pane { display: none !important; }
	[data-rtp-pane="export"] { display: block !important; padding: 0; }
	.rtp-buildsheet-wrap { border: 0; padding: 0; margin: 0; }
	.rtp-buildsheet svg { width: 100% !important; height: auto !important; max-height: 100vh; }
}