/*!
 * Pro Peptide Planner — v2.18.0 styling.
 *
 * Pure rebuild from /mnt/user-data/outputs/pp-planner-full.jsx.
 * Single layered file — every selector lives under .ppp and is scoped to
 * #ppp-root so theme styles do not bleed in. No external font load (the
 * theme supplies Montserrat 400 / 500 / 600 site-wide; we only set the
 * family on root + buttons + inputs to immunize against parent overrides).
 *
 * Tokens follow DESIGN.md (May 2026 lock):
 *   - Family : Montserrat 400 / 500 / 600 only — no 700/800
 *   - Radii  : 6 (badge) · 12 (component) · 16 (card)
 *   - Colors : single palette block below
 */

/* ============================================================
 * 0. TOKENS
 * ============================================================ */

.ppp {
	--ppp-blue: #1f9edb;
	--ppp-blue-text: #0e6a99;
	--ppp-blue-deep: #0d5a87;
	--ppp-blue-tint: #E8F4FB;

	--ppp-green: #7ccf4a;
	--ppp-green-text: #4e9c2a;
	--ppp-green-tint: #EAF7DF;

	--ppp-orange: #f97316;
	--ppp-orange-text: #c2410c;

	--ppp-amber-tint: #FEF3C7;
	--ppp-amber-text: #92400E;

	--ppp-text: #343434;
	--ppp-text-sec: #6B7280;
	--ppp-text-tri: #9CA3AF;

	--ppp-bg: #FFFFFF;
	--ppp-bg-sec: #fafafa;
	--ppp-bg-ter: #F3F4F6;

	--ppp-border: #E5E7EB;
	--ppp-border-soft: #F3F4F6;

	--ppp-radius-badge: 6px;
	--ppp-radius-comp: 12px;
	--ppp-radius-card: 16px;

	font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--ppp-text);
	background: var(--ppp-bg);
	font-size: 14px;
	line-height: 1.45;
	box-sizing: border-box;
}
.ppp *,
.ppp *::before,
.ppp *::after { box-sizing: inherit; }
.ppp button,
.ppp input,
.ppp select,
.ppp textarea {
	font-family: inherit;
	font-weight: 500;
}

/* ============================================================
 * 1. HERO — removed 2026-05-23. Theme pp_render_page_header
 *    supplies the page H1 above the planner shortcode.
 *
 *    2026-05-24: tighten the gap between the page H1+breadcrumb and the
 *    .ppp__intake band. Default pp-page-header padding-bottom is 32px;
 *    combined with .ppp__intake's own 16px padding-top that's 48px above
 *    the intake heading row. Reduce by 30px scoped to the planner page only
 *    (body.page-id-4475) so other pages keep their roomier header.
 * ============================================================ */
body.page-id-4475 .pp-page-header {
	padding-bottom: 2px;
}
body.page-id-4475 .ppp__intake {
	margin-top: -20px;
}

/* ============================================================
 * 2. INTAKE PANEL (Section 0) — now the first band on the page
 * ============================================================ */

.ppp__intake {
	background: #ffffff;
	border-bottom: 1px solid var(--ppp-border-soft);
	padding: 16px 40px 28px;
}
.ppp__intake-inner {
	max-width: 1080px;
	margin: 0 auto;
}
.ppp__intake-headrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 12px;
}
.ppp__intake-kicker {
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-blue-text);
	letter-spacing: 0.7px;
	text-transform: uppercase;
}
.ppp__intake-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ppp-text);
}
.ppp__intake-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
}
.ppp__intake-status--locked {
	background: var(--ppp-bg-ter);
	color: var(--ppp-text-sec);
}
.ppp__intake-status--open {
	background: var(--ppp-green-tint);
	color: var(--ppp-green-text);
}

.ppp__intake-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px;
	margin-bottom: 14px;
}
.ppp__intake-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.ppp__intake-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-text-sec);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.ppp__intake-select-wrap {
	position: relative;
	display: block;
}
.ppp__intake-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding: 12px 38px 12px 14px;
	border: 1.5px solid var(--ppp-border);
	border-radius: var(--ppp-radius-comp);
	background: var(--ppp-bg);
	color: var(--ppp-text-tri);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	outline: none;
}
.ppp__intake-field[ data-pp-intake-filled="true" ] .ppp__intake-select {
	border-color: var(--ppp-blue);
	color: var(--ppp-text);
	font-weight: 600;
}
.ppp__intake-select:focus {
	outline: 2px solid var(--ppp-blue);
	outline-offset: 1px;
}
.ppp__intake-select-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ppp-text-tri);
	display: flex;
	pointer-events: none;
}
.ppp__intake-field[ data-pp-intake-filled="true" ] .ppp__intake-select-icon {
	color: var(--ppp-blue-deep);
}

.ppp__intake-disclaimer {
	display: flex;
	gap: 8px;
	margin: 0;
	font-size: 11px;
	color: var(--ppp-text-sec);
	line-height: 1.5;
}
.ppp__intake-disclaimer svg {
	color: var(--ppp-text-tri);
	flex-shrink: 0;
	margin-top: 1px;
}
@media ( max-width: 768px ) {
	.ppp__intake { padding: 20px 16px; }
	.ppp__intake-grid { grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
}

/* ============================================================
 * 3. SEARCH BAR + RESULTS
 * ============================================================ */

.ppp__search-section {
	max-width: 900px;
	margin: 32px auto 0;
	padding: 0 16px;
}
.ppp__search-shell { display: block; }
.ppp__search-shell[ data-pp-gate="locked" ] .ppp__search-pill {
	opacity: 0.55;
	pointer-events: none;
	cursor: not-allowed;
}
.ppp__search-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: var(--ppp-bg);
	border: 1px solid var(--ppp-border);
	border-radius: var(--ppp-radius-card);
}
.ppp__search-leftIcon {
	display: flex;
	align-items: center;
	color: var(--ppp-blue);
	margin-left: 14px;
}
.ppp__search-shell[ data-pp-gate="locked" ] .ppp__search-leftIcon {
	color: var(--ppp-text-tri);
}
.ppp__search-input {
	flex: 1;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: var(--ppp-text);
	padding: 10px 0;
	min-width: 0;
}
.ppp__search-input::placeholder { color: var(--ppp-text-tri); }
.ppp__search-clear {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 0;
	background: var(--ppp-bg-ter);
	color: var(--ppp-text-sec);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ppp__search-submit {
	height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 11px;
	background: var(--ppp-blue-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.ppp__search-submit[ disabled ] {
	background: var(--ppp-text-tri);
	cursor: not-allowed;
	opacity: 0.6;
}

/* Hide the search bar + its "complete the form" helper until all four intake
   fields are filled (the locked shell carries data-pp-gate="locked"). :has()
   collapses the whole section so there's no leftover gap; the two direct rules
   are the fallback for engines without :has(). */
.ppp__search-shell[ data-pp-gate="locked" ] { display: none; }
.ppp__search-help { display: none; }
.ppp__search-section:has( .ppp__search-shell[ data-pp-gate="locked" ] ) { display: none; }

.ppp__results {
	margin-top: 8px;
	background: var(--ppp-bg);
	border: 1px solid var(--ppp-border);
	border-radius: 14px;
	overflow: hidden;
}
.ppp__results-count {
	font-size: 11px;
	color: var(--ppp-text-sec);
	margin: 0;
	padding: 9px 16px;
	background: var(--ppp-bg-sec);
	border-bottom: 1px solid var(--ppp-border-soft);
}
.ppp__results-empty {
	font-size: 13px;
	color: var(--ppp-text-sec);
	text-align: center;
	padding: 22px;
	margin: 0;
}
/* Cap visible results to ~4 rows; the rest scroll within the list so the
 * dose cards and calendar below the search remain discoverable on first
 * paint. Row height = 128px thumb + 24px vertical padding ≈ 152px. */
.ppp__results-list {
	display: block;
	max-height: 624px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* B1 (2026-06-09 mobile audit): snap rows so a half-cut card can't
	 * rest at the list's top edge. */
	scroll-snap-type: y proximity;
	scroll-padding-top: 8px;
}
.ppp__result-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 16px;
	min-height: 72px;
	border-top: 1px solid var(--ppp-border-soft);
	transition: background 120ms ease;
}
.ppp__result-row[data-pp-result-first="true"] { border-top: 0; }

/* Whole-row click affordance (replaces the old +Add button). Only rows
 * that carry data-pp-add are interactive; added/full rows are inert. */
.ppp__result-row[data-pp-add] {
	cursor: pointer;
}
.ppp__result-row[data-pp-add]:hover,
.ppp__result-row[data-pp-add]:focus-visible {
	background: var(--ppp-bg-sec);
	outline: none;
}
.ppp__result-row[data-pp-add]:focus-visible {
	box-shadow: inset 0 0 0 2px var(--ppp-blue);
}
.ppp__result-thumb {
	width: 128px;
	height: 128px;
	border-radius: 8px;
	border: 1px solid var(--ppp-border);
	background: var(--ppp-bg);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ppp__result-thumb-img {
	max-width: 112px;
	max-height: 112px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* SVG fallback (when compound.image_url is null, vialSvg() emits a 26×32
 * SVG by default). Scale to fill the padded area inside .ppp__result-thumb
 * with the original 26:32 aspect ratio, so search-row vials match the
 * doubled stack-thumb / dose-thumb treatment visually. */
.ppp__result-thumb svg {
	width: 88px;
	height: 108px;
}
.ppp__result-body { flex: 1; min-width: 0; }
.ppp__result-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
	flex-wrap: wrap;
}
.ppp__result-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ppp-text);
}
.ppp__result-meta {
	margin: 0;
	font-size: 13px;
	color: var(--ppp-text-sec);
}

/* Addendum styling — dose pill + right-aligned FROM/price block.
   Replaces the old plain "10mg · From $X" .ppp__result-meta line. */
.ppp__result-dose-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 9999px;
	background: #E8F4FB;
	color: #0e6a99;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.ppp__result-price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 0;
	margin-right: 14px; /* keep clear of the +Add / Added / Stack-full affordance */
}
.ppp__result-price-from {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--ppp-text-tri, #9CA3AF);
	text-transform: uppercase;
}
.ppp__result-price-amount {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
	color: #0e6a99; /* brand-blue (matches the dose-pill text) */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.ppp__result-row { flex-wrap: wrap; }
	.ppp__result-body { flex: 1 1 100%; }
	.ppp__result-price {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
		margin: 6px 0 0 0;
	}
	.ppp__result-price-amount { font-size: 16px; }
}
/* Right-edge status/affordance — replaces the old +Add button. The hint
 * variant stays invisible until the row is hovered/focused so it teaches
 * the click-anywhere interaction without competing with the row content. */
.ppp__result-affordance {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
}
.ppp__result-affordance--added {
	background: #EAF7DF;
	color: var(--ppp-green-text);
}
.ppp__result-affordance--full {
	background: var(--ppp-bg-ter);
	color: var(--ppp-text-tri);
}
.ppp__result-affordance--hint {
	background: var(--ppp-blue);
	color: #fff;
	opacity: 0;
	transform: translateX(4px);
	transition: opacity 120ms ease, transform 120ms ease;
}
.ppp__result-row[data-pp-add]:hover .ppp__result-affordance--hint,
.ppp__result-row[data-pp-add]:focus-visible .ppp__result-affordance--hint {
	opacity: 1;
	transform: translateX(0);
}

/* Category pills — neutral fallback + per-category tints */
.ppp__cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: var(--ppp-bg-ter);
	color: var(--ppp-text-sec);
}
.ppp__cat-pill--healing-recovery { background: #EAF7DF; color: var(--ppp-green-text); }
.ppp__cat-pill--weight-metabolism { background: #FEEAD8; color: var(--ppp-orange-text); }
.ppp__cat-pill--performance-growth { background: #FCE7F3; color: #a3306e; }
.ppp__cat-pill--skin-longevity { background: #EEE7FB; color: #5e3fb5; }
.ppp__cat-pill--brain-mood { background: #D5F5F1; color: #0d8a7f; }
.ppp__cat-pill--sleep-stress { background: #DBEAFE; color: #1d4ed8; }
.ppp__cat-pill--sexual-health { background: #FCE7F3; color: #a3306e; }
.ppp__cat-pill--gut-immune { background: #FEF3C7; color: #92400E; }

/* Why-it-matched pill: shown on search-result rows when the query matched
 * a tag/synonym rather than the compound name. Quiet, neutral style so it
 * doesn't compete with the colored category pill next to it. */
.ppp__match-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 500;
	background: var(--ppp-bg-sec);
	color: var(--ppp-text-sec);
	border: 1px solid var(--ppp-border);
}
.ppp__match-pill svg { opacity: 0.7; }

/* ============================================================
 * 4. RESULTS — divider headers
 * ============================================================ */
/* (Section 4 — Stack section + Match CTA — retired 2026-05-22.) */

.ppp__results-section {
	max-width: 900px;
	margin: 48px auto 0;
	padding: 0 16px 100px;
}
.ppp__divider-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 32px 0 10px;
}
.ppp__divider-rule { flex: 1; height: 1px; background: var(--ppp-border); }
.ppp__divider-kicker {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--ppp-blue-text);
	letter-spacing: 0.8px;
	text-transform: uppercase;
}
.ppp__divider-sub {
	margin: 0 0 32px;
	font-size: 13px;
	color: var(--ppp-text-sec);
	text-align: center;
}

/* ============================================================
 * 5. DOSE CARDS
 * ============================================================ */

.ppp__dose-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 16px;
}
.ppp__dose-card {
	position: relative;
	background: var(--ppp-bg);
	border: 1px solid var(--ppp-border);
	border-radius: var(--ppp-radius-card);
	padding: 24px 28px;
	/* visible overflow lets the floating source chip sit on the top border;
	 * padding-left clears the absolute corner number circle at top-left. */
	overflow: visible;
	padding-left: 56px;
}
.ppp__dose-card--pending { background: var(--ppp-bg-sec); }
/* Remove (×) lives in the top-right of each dose card, replacing the
 * old stack-row remove button. */
.ppp__dose-remove {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--ppp-border);
	background: var(--ppp-bg);
	color: var(--ppp-text-sec);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}
.ppp__dose-remove:hover {
	background: var(--ppp-bg-sec);
	color: var(--ppp-text);
}
.ppp__dose-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
/* Position badge inside the dose-card header — mirrors the old stack-row
 * number, moved here per 2026-05-22. */
.ppp__dose-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ppp-text);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}
.ppp__dose-thumb {
	/* Doubled width + height per 2026-05-21 feedback. The inline SVG inside
	 * scales correspondingly via .ppp__dose-thumb svg below. */
	width: 92px;
	height: 108px;
	border-radius: 14px;
	background: var(--ppp-bg-sec);
	border: 1px solid var(--ppp-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ppp__dose-thumb svg {
	width: 52px;
	height: 64px;
}
.ppp__dose-thumb-img {
	max-width: 80px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ppp__dose-titles { flex: 1; min-width: 0; }
.ppp__dose-name-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}
.ppp__dose-name {
	/* Doubled from 18px so the dose card has a real heading instead of a
	 * subhead-sized title. */
	font-size: 28px;
	font-weight: 600;
	color: var(--ppp-text);
	letter-spacing: -0.4px;
	line-height: 1.15;
}
.ppp__dose-mg-badge {
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-text);
	background: var(--ppp-bg-ter);
	padding: 3px 10px;
	border-radius: 9999px;
	letter-spacing: 0.5px;
}
.ppp__dose-subtitle { margin: 0; font-size: 12px; color: var(--ppp-text-sec); }
.ppp__dose-pending-msg { margin: 0; font-size: 13px; color: var(--ppp-text-sec); }

.ppp__source-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
}
.ppp__source-chip--approved { background: var(--ppp-green-tint); color: var(--ppp-green-text); }
.ppp__source-chip--review   { background: var(--ppp-amber-tint); color: var(--ppp-amber-text); }

/* Adjustment breakdown badge */
.ppp__adjustment-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--ppp-blue-tint);
	border: 1px solid var(--ppp-blue);
	border-radius: 10px;
	margin-bottom: 20px;
	font-size: 12px;
	color: var(--ppp-blue-deep);
	flex-wrap: wrap;
}
.ppp__adjustment-base strong { font-weight: 600; }
.ppp__adjustment-chip {
	font-size: 11px;
	color: var(--ppp-blue-deep);
}
.ppp__adjustment-dot { opacity: 0.5; color: var(--ppp-blue-deep); }

/* Reconstitution row */
.ppp__section-kicker {
	margin: 0 0 12px;
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-text-tri);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.ppp__recon { margin-bottom: 24px; }
.ppp__recon-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 150px ) );
	gap: 12px;
	justify-content: start;
}
.ppp__recon-input { min-width: 0; }
.ppp__recon-label {
	margin: 0 0 6px;
	font-size: 9px;
	font-weight: 600;
	color: var(--ppp-text-tri);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.ppp__recon-field {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--ppp-bg);
	border: 1.5px solid var(--ppp-border);
	border-radius: 10px;
}
.ppp__recon-input[ data-pp-clamped="true" ] .ppp__recon-field {
	border-color: var(--ppp-blue);
	background: var(--ppp-blue-tint);
}
.ppp__recon-input[ data-pp-clamped="true" ] .ppp__recon-label { color: var(--ppp-blue-deep); }
.ppp__recon-value { font-size: 18px; font-weight: 600; color: var(--ppp-text); }
.ppp__recon-unit { font-size: 11px; color: var(--ppp-text-tri); }

/* Editable recon input: visually matches the legacy .ppp__recon-value span.
 * Native browser chrome on input[type=number] is fully stripped so the only
 * visible frame is the parent .ppp__recon-field — no double-border look. */
.ppp__recon-input-el,
input.ppp__recon-input-el[type="number"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-image: none;
	box-shadow: none;
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	color: var(--ppp-text);
	line-height: 1.1;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
}
.ppp__recon-input-el::-webkit-outer-spin-button,
.ppp__recon-input-el::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ppp__recon-input-el:focus,
.ppp__recon-input-el:focus-visible,
input.ppp__recon-input-el[type="number"]:focus {
	outline: none;
	border: 0;
	box-shadow: none;
	background: transparent;
}
.ppp__recon-input:focus-within .ppp__recon-field {
	border-color: var(--ppp-blue);
	box-shadow: 0 0 0 3px rgba( 31, 158, 219, 0.18 );
}

/* Two-tier floor states on the editable inputs.
 * warn    = draw is 3 IU <= iu < 5 IU (allowed, but flagged)
 * blocked = draw is below 3 IU (snap-back fires on commit) */
.ppp__recon-input[ data-pp-state="warn" ] .ppp__recon-field {
	border-color: var(--ppp-orange);
	background: #FEEAD8;
}
.ppp__recon-input[ data-pp-state="warn" ] .ppp__recon-label,
.ppp__recon-input[ data-pp-state="warn" ] .ppp__recon-input-el,
.ppp__recon-input[ data-pp-state="warn" ] .ppp__recon-unit {
	color: var(--ppp-orange-text);
}
.ppp__recon-input[ data-pp-state="blocked" ] .ppp__recon-field {
	border-color: #ef4444;
	background: #FDE8EA;
}
.ppp__recon-input[ data-pp-state="blocked" ] .ppp__recon-label,
.ppp__recon-input[ data-pp-state="blocked" ] .ppp__recon-input-el,
.ppp__recon-input[ data-pp-state="blocked" ] .ppp__recon-unit {
	color: #c0384a;
}
.ppp__recon-input[ data-pp-state="warn" ]:focus-within .ppp__recon-field,
.ppp__recon-input[ data-pp-state="blocked" ]:focus-within .ppp__recon-field {
	box-shadow: none;
}

/* Recon head row: kicker + Reset-to-recommended button. */
.ppp__recon-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.ppp__recon-head .ppp__section-kicker { margin: 0; }
.ppp__recon-reset {
	margin: 0;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid var(--ppp-border);
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ppp-text-sec);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.ppp__recon-reset:hover {
	border-color: var(--ppp-blue);
	color: var(--ppp-blue-text);
}
.ppp__recon-reset:focus-visible {
	outline: 2px solid var(--ppp-blue);
	outline-offset: 2px;
}

/* Floor warning / danger notes (sit below the recon grid). */
.ppp__floor-note {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.45;
}
.ppp__floor-note svg { flex: 0 0 auto; margin-top: 2px; }
.ppp__floor-note--warn {
	background: #FEEAD8;
	border: 1px solid var(--ppp-orange);
	color: var(--ppp-orange-text);
}
.ppp__floor-note--blocked {
	background: #FDE8EA;
	border: 1px solid #ef4444;
	color: #c0384a;
}

.ppp__clamp-note {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	background: var(--ppp-blue-tint);
	border: 1px solid var(--ppp-blue);
	border-radius: 8px;
	font-size: 11px;
	color: var(--ppp-blue-deep);
	line-height: 1.4;
}
.ppp__clamp-note svg { flex-shrink: 0; margin-top: 1px; }

.ppp__oral-notice {
	margin-bottom: 24px;
	padding: 14px 16px;
	background: var(--ppp-bg-sec);
	border-radius: var(--ppp-radius-comp);
	font-size: 13px;
	color: var(--ppp-text-sec);
}
.ppp__oral-notice strong { color: var(--ppp-text); }

/* Syringe gauge */
.ppp__syringe { margin-bottom: 24px; }
.ppp__syringe-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.ppp__syringe-iu { margin: 0; }
.ppp__syringe-iu-num { font-size: 28px; font-weight: 600; color: var(--ppp-blue-deep); letter-spacing: -0.5px; }
.ppp__syringe-iu-unit { font-size: 11px; color: var(--ppp-text-sec); margin-left: 4px; }
.ppp__syringe-bar {
	position: relative;
	height: 14px;
	background: var(--ppp-bg-ter);
	border-radius: 7px;
	overflow: hidden;
}
.ppp__syringe-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	border-radius: 7px;
}
.ppp__syringe-tick {
	position: absolute;
	top: 0; bottom: 0;
	width: 1px;
	background: rgba(255,255,255,0.6);
}
.ppp__syringe-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
}
.ppp__syringe-labels span { font-size: 9px; color: var(--ppp-text-tri); }
.ppp__syringe-stats {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	font-size: 11px;
	color: var(--ppp-text-sec);
}
.ppp__syringe-stats strong { color: var(--ppp-text); margin-left: 4px; }

/* Protocol chips */
.ppp__proto-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.ppp__proto-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 9999px;
	background: var(--ppp-bg-sec);
	border: 1px solid var(--ppp-border);
	font-size: 11px;
	font-weight: 500;
	color: var(--ppp-text-sec);
}

/* Schedule numbered */
.ppp__schedule { margin-bottom: 24px; }
.ppp__schedule-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ppp__schedule-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.ppp__schedule-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--ppp-blue-text);
	color: var(--ppp-blue-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
}
.ppp__schedule-text {
	font-size: 13px;
	color: var(--ppp-text);
	line-height: 1.55;
}
.ppp__schedule-text strong { font-weight: 600; }

/* Handling chips */
.ppp__handling {}
.ppp__handle-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ppp__handle-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 9999px;
	background: #fff;
	border: 1px solid var(--ppp-border);
	font-size: 11px;
	font-weight: 500;
	color: var(--ppp-text-sec);
}

/* Dose card disclaimer */
.ppp__dose-disclaimer {
	margin: 20px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ppp-border-soft);
	font-size: 10px;
	color: var(--ppp-text-tri);
	font-style: italic;
}

@media ( max-width: 768px ) {
	.ppp__dose-card { padding: 18px; }
	.ppp__recon-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 6. CALENDAR
 * ============================================================ */

.ppp__calendar {
	background: var(--ppp-bg);
	border: 1px solid var(--ppp-border);
	border-radius: 14px;
	padding: 24px;
}
.ppp__cal-headbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.ppp__cal-navleft {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ppp__cal-chev {
	width: 30px;
	height: 30px;
	border-radius: 7px;
	border: 1px solid var(--ppp-border);
	background: var(--ppp-bg);
	font-size: 16px;
	color: var(--ppp-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 500;
}
.ppp__cal-today {
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px solid var(--ppp-border);
	background: var(--ppp-bg);
	font-size: 12px;
	font-weight: 500;
	color: var(--ppp-text);
	cursor: pointer;
}
.ppp__cal-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ppp-text);
	margin-left: 6px;
}
.ppp__cal-views {
	display: inline-flex;
	gap: 0;
	background: var(--ppp-bg-ter);
	border-radius: 8px;
	padding: 3px;
}
.ppp__cal-view-btn {
	padding: 5px 12px;
	min-width: 32px;
	border-radius: 6px;
	border: 0;
	background: transparent;
	color: var(--ppp-text-sec);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}
.ppp__cal-view-btn[ data-active="true" ] {
	background: var(--ppp-blue-deep);
	color: #fff;
}
.ppp__cal-subtitle {
	margin: 0 0 14px;
	font-size: 11px;
	color: var(--ppp-text-tri);
	font-style: italic;
}
.ppp__cal-legend {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.ppp__cal-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--ppp-border);
	border-radius: 9999px;
	background: var(--ppp-bg);
	font-size: 12px;
	color: var(--ppp-text-sec);
}
.ppp__cal-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
/* PM / evening compounds keep the orange ring, consistent with Week/Month. */
.ppp__cal-legend-dot--pm {
	box-shadow: 0 0 0 1.5px var(--ppp-bg, #fff), 0 0 0 3px #f97316;
}
.ppp__cal-legend-name {
	font-weight: 600;
	color: var(--ppp-text);
}
.ppp__cal-legend-meta { color: var(--ppp-text-sec); font-weight: 500; }
.ppp__cal-legend-num { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* DAY VIEW */
.ppp__day-grid { display: block; }
.ppp__day-row {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ppp-border-soft);
	align-items: flex-start;
}
.ppp__day-hr {
	font-size: 11px;
	font-weight: 600;
	color: var(--ppp-text-tri);
	letter-spacing: 0.4px;
	padding-top: 6px;
}
.ppp__day-events {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ppp__day-empty { display: block; height: 6px; }
.ppp__day-event {
	padding: 10px 14px;
	border: 1.5px solid var(--ppp-blue);
	border-radius: 10px;
	background: var(--ppp-bg);
}
.ppp__day-event-time {
	margin: 0 0 3px;
	font-size: 11px;
	font-weight: 600;
}
.ppp__day-event-body {
	margin: 0;
	font-size: 13px;
	color: var(--ppp-text);
}
/* PM / evening accent — used by the Week view (Day view never adds this class,
   so the Day view is unchanged). Border colour is set inline to #f97316. */
.ppp__day-event--pm {
	background: #fff8f3;
}
.ppp__pm-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 4px;
	background: #f97316;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	vertical-align: middle;
}

/* WEEK VIEW */
.ppp__week-list { display: block; }
.ppp__week-row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ppp-border-soft);
	align-items: flex-start;
}
.ppp__week-row:last-child { border-bottom: 0; }
.ppp__week-dow {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-text-tri);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.ppp__week-date {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ppp-text);
}
.ppp__week-row[ data-pp-today="true" ] .ppp__week-date {
	color: var(--ppp-blue, #1f9edb);
}
.ppp__week-chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 4px;
}
.ppp__week-chip {
	display: inline-flex;
	align-self: flex-start;
	padding: 7px 12px;
	border-radius: 9px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}
.ppp__week-rest {
	font-size: 12px;
	color: var(--ppp-text-tri);
	font-style: italic;
}

/* MONTH VIEW */
.ppp__month { display: block; }
.ppp__month-headers {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	margin-bottom: 6px;
}
.ppp__month-dow {
	font-size: 10px;
	font-weight: 600;
	color: var(--ppp-text-sec);
	text-align: center;
	padding: 6px 0;
	letter-spacing: 0.4px;
}
.ppp__month-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}
.ppp__month-cell {
	min-height: 62px;
	border: 1px solid var(--ppp-border-soft);
	border-radius: 8px;
	padding: 6px;
	background: var(--ppp-bg);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 4px;
	position: relative;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.ppp__month-cell:hover {
	background: var(--ppp-blue-tint, #E8F4FB);
	border-color: var(--ppp-blue, #1f9edb);
}
.ppp__month-cell:focus-visible {
	outline: 2px solid var(--ppp-blue, #1f9edb);
	outline-offset: 2px;
}
.ppp__month-cell[ data-pp-out-of-month="true" ] {
	background: var(--ppp-bg-sec);
	opacity: 0.55;
}
.ppp__month-cell[ data-pp-today="true" ] {
	border: 2px solid #f97316;
	background: var(--ppp-bg);
}
.ppp__month-day-num {
	font-size: 11px;
	font-weight: 500;
	color: var(--ppp-text-sec);
	line-height: 1;
	align-self: flex-start;
}
.ppp__month-cell[ data-pp-today="true" ] .ppp__month-day-num {
	color: #c2410c;
	font-weight: 700;
}
/* Dots only — one per scheduled compound. The dose detail lives in the Day
   cards and the legend pills, so the grid stays visual + even-height. */
.ppp__month-dots {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 5px;
	min-width: 0;
}
.ppp__month-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
/* PM / evening entries: orange ring around the dot. */
.ppp__month-dot--pm {
	box-shadow: 0 0 0 1.5px var(--ppp-bg, #fff), 0 0 0 3px #f97316;
}
/* Overflow count ("+N") when a day has more compounds than the 4-dot cap.
   Muted, small, sits inline right after the last visible dot. Full list is
   one tap away in the Day view — nothing is hidden, just collapsed. */
.ppp__month-more {
	flex-shrink: 0;
	align-self: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 8px;
	color: #6b7280;
	white-space: nowrap;
}

@media ( max-width: 768px ) {
	.ppp__calendar { padding: 18px; }
	.ppp__cal-headbar { gap: 8px; }
	.ppp__cal-title { font-size: 13px; margin-left: 0; flex: 1 1 100%; order: 99; }
	.ppp__week-row { grid-template-columns: 68px 1fr; }
	.ppp__month-cell { min-height: 50px; padding: 5px; }
	.ppp__month-dots { gap: 4px; }
	.ppp__month-dot { width: 7px; height: 7px; }
	.ppp__month-more { font-size: 9px; line-height: 7px; }
}

/* ============================================================
 * 7. RECALCULATE FOOTER
 * ============================================================ */

.ppp__recalculate-row {
	text-align: center;
	margin: 24px 0 0;
	display: flex;
	justify-content: center;
	gap: 24px;
}
.ppp__recalculate {
	background: none;
	border: 0;
	font-size: 12px;
	color: var(--ppp-blue-text);
	font-weight: 500;
	cursor: pointer;
	padding: 0;
}
.ppp__recalculate--clear {
	color: var(--ppp-text-sec);
}
.ppp__recalculate--clear:hover {
	color: var(--ppp-text);
}

/* ============================================================
   COMPACT DOSE CARD v4 (2026-05-27)
   Header carries inputs; "Research baseline" floats on top border;
   adjustment banner and proto-chip strip are retired. Old
   .ppp__recon / .ppp__proto-chips / .ppp__adjustment-badge rules
   are kept above for safety but no longer rendered.
   ============================================================ */

/* Belt-and-suspenders: kill the adjustment banner if anything ever
   echoes it back into a card. */
.ppp__dose-card .ppp__adjustment-badge { display: none !important; }

/* Floating "Research baseline" / "Needs review" chip on top border. */
.ppp__source-chip-float {
	position: absolute;
	top: -14px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ppp-green-tint, #EAF7DF);
	color: var(--ppp-green-text, #4e9c2a);
	border: 1.5px solid #7ccf4a;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(52, 52, 52, 0.05);
	z-index: 2;
}
.ppp__source-chip-float.ppp__source-chip--review {
	background: var(--ppp-amber-tint, #FEF3C7);
	color: var(--ppp-amber-text, #92400e);
	border-color: #fbbf24;
}

/* Header: thumb + title block + three input cells + close-button slot.
   The number circle is absolute-positioned on the card itself (not a
   grid item), so the row starts at the thumb. */
.ppp__dose-card .ppp__dose-header {
	display: grid;
	/* Vial / Water / Dose cells widened 100→120 so a 4-digit dose ("2750")
	   at 22px font + the "mcg" unit fit without overlap. Matched set so they
	   read as one row. Headroom for 5 digits or "1000.5"-style decimals. */
	grid-template-columns: 96px 1fr 120px 120px 120px 36px;
	align-items: center;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #F3F4F6;
	margin-bottom: 14px;
}
.ppp__dose-card .ppp__dose-num {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #343434;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
	padding: 0;
	z-index: 1;
}
.ppp__dose-card .ppp__dose-thumb {
	width: 96px;
	height: 120px;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: none;
}
.ppp__dose-card .ppp__dose-thumb img,
.ppp__dose-card .ppp__dose-thumb-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ppp__dose-card .ppp__dose-titles { min-width: 0; }
.ppp__dose-card .ppp__dose-name-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.ppp__dose-card .ppp__dose-name {
	font-size: 22px;
	font-weight: 600;
	color: var(--ppp-text, #343434);
	letter-spacing: -0.4px;
	line-height: 1.1;
	white-space: nowrap;
}
.ppp__dose-card .ppp__dose-mg-badge {
	display: inline-flex;
	padding: 3px 11px;
	border-radius: 999px;
	background: #E8F4FB;
	border: 1px solid #1f9edb;
	font-size: 11px;
	font-weight: 600;
	color: #0e6a99;
	white-space: nowrap;
}
.ppp__dose-card .ppp__dose-subtitle {
	font-size: 12px;
	color: var(--ppp-text-sec, #6B7280);
	margin: 4px 0 0;
	line-height: 1.3;
}

/* Header input trio. `display: contents` flattens the wrapper so the
   three cells become grid items at columns 4, 5, 6 of the header grid
   directly — no nested flex, fixed 100px each, no overlap with the
   close-button slot (column 7). */
.ppp__dose-inputs {
	display: contents;
}
.ppp__input-cell {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
}
.ppp__input-label {
	font-size: 9px;
	font-weight: 600;
	color: #9CA3AF;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1;
}
/* Input box: the wrapper carries the visible frame now (border, radius,
   hover, focus halo, editable-dot affordance). The <input> inside is
   borderless and transparent so the box is the only visual cue. */
.ppp__input-line {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 14px 6px 8px;
	background: #ffffff;
	border: 1.5px solid #D1D5DB;
	border-radius: 8px;
	cursor: text;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ppp__input-line::after {
	content: '';
	position: absolute;
	bottom: 4px;
	right: 6px;
	width: 4px;
	height: 4px;
	background: #D1D5DB;
	border-radius: 50%;
	opacity: 0.6;
	pointer-events: none;
}
.ppp__input-line:hover {
	border-color: var(--ppp-blue-deep, #1f9edb);
	background: #fafdff;
}
.ppp__input-line:focus-within {
	border-color: var(--ppp-blue-deep, #1f9edb);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.1);
}
.ppp__input-line input,
.ppp__input-line input.ppp__recon-input-el[type="number"] {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	outline: none !important;
	font-size: 22px;
	font-weight: 600;
	color: var(--ppp-text, #343434);
	text-align: center;
	padding: 0;
	margin: 0;
	font-family: inherit;
	border-radius: 0 !important;
	appearance: textfield;
	-moz-appearance: textfield;
	box-shadow: none !important;
}
.ppp__input-line input::-webkit-outer-spin-button,
.ppp__input-line input::-webkit-inner-spin-button,
.ppp__input-line input.ppp__recon-input-el[type="number"]::-webkit-outer-spin-button,
.ppp__input-line input.ppp__recon-input-el[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	display: none !important;
}
.ppp__input-unit {
	font-size: 11px;
	color: #9CA3AF;
	font-weight: 500;
}
/* Mirror the recon two-tier floor onto the input box so warn / blocked /
   clamped keeps surfacing visually now that the visible frame is the box
   border (not the input's old underline). */
.ppp__input-cell[ data-pp-state="warn" ] .ppp__input-line {
	border-color: var(--ppp-amber, #f59e0b);
	background: #fffaf0;
}
.ppp__input-cell[ data-pp-state="warn" ] .ppp__input-line input { color: var(--ppp-amber-text, #92400e); }
.ppp__input-cell[ data-pp-state="warn" ] .ppp__input-label { color: var(--ppp-amber-text, #92400e); }
.ppp__input-cell[ data-pp-state="blocked" ] .ppp__input-line {
	border-color: var(--ppp-red, #dc2626);
	background: #fff5f5;
}
.ppp__input-cell[ data-pp-state="blocked" ] .ppp__input-line input { color: var(--ppp-red, #dc2626); }
.ppp__input-cell[ data-pp-state="blocked" ] .ppp__input-label { color: var(--ppp-red, #dc2626); }
.ppp__input-cell[ data-pp-clamped="true" ] .ppp__input-line {
	border-color: var(--ppp-blue-deep, #1f9edb);
	background: #fafdff;
}

/* Safety overlay row — reset button + floor / clamp notes that used to
   live inside the .ppp__recon block. Slim, no kicker. */
.ppp__recon-overlay {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: -4px 0 12px;
}
.ppp__recon-overlay .ppp__recon-reset { align-self: flex-end; }

/* Editable schedule start date. Native <input type="date"> sits on top,
   transparent, so the dashed-underline label is what the user sees. */
.ppp__editable-date {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	cursor: pointer;
}
.ppp__editable-date-display {
	font-weight: 600;
	color: var(--ppp-text, #343434);
	border-bottom: 1.5px dashed #E5E7EB;
	padding: 0 2px;
	transition: border-color 0.15s ease;
}
.ppp__editable-date:hover .ppp__editable-date-display,
.ppp__editable-date:focus-within .ppp__editable-date-display {
	border-bottom-color: var(--ppp-blue-deep, #1f9edb);
	border-bottom-style: solid;
}
.ppp__editable-date-icon {
	color: var(--ppp-blue-deep, #1f9edb);
	opacity: 0.6;
	flex: none;
}
.ppp__editable-date:hover .ppp__editable-date-icon,
.ppp__editable-date:focus-within .ppp__editable-date-icon { opacity: 1; }
.ppp__editable-date input[type="date"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
}

/* Mobile: stack inputs below the title row. Drop `display: contents`
   on the inputs wrapper so it can span the full row underneath. The
   number circle stays absolute on the card; the header just loses its
   first column. */
@media (max-width: 768px) {
	.ppp__dose-card {
		padding-left: 48px;
	}
	.ppp__dose-card .ppp__dose-num {
		top: 14px;
		left: 12px;
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
	.ppp__dose-card .ppp__dose-header {
		grid-template-columns: 72px 1fr;
		grid-template-rows: auto auto;
		gap: 12px;
		padding-right: 36px;
	}
	.ppp__dose-card .ppp__dose-thumb {
		width: 72px;
		height: 90px;
	}
	.ppp__dose-inputs {
		grid-column: 1 / -1;
		display: grid;
		/* Dose carries 4-digit values; vial + water are 1-2 digits. Give the
		   dose cell ~40% more room than vial/water so "2750 mcg" fits at the
		   18px mobile font without clipping. */
		grid-template-columns: 1fr 1fr 1.4fr;
		gap: 8px;
		margin-top: 4px;
	}
	.ppp__input-line input,
	.ppp__input-line input.ppp__recon-input-el[type="number"] {
		font-size: 18px;
	}
	.ppp__source-chip-float {
		right: 16px;
		font-size: 10px;
		padding: 5px 11px;
	}
}

/* ============================================================================
 * Save to my account — per-card CTA (Phase 2)
 * Bottom-right of each dose card (2026-05-31). Disclaimer sits above on its
 * own row so the button has a clean corner anchor without overlap.
 * ========================================================================== */
.ppp__dose-save {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
}
@media (max-width: 540px) {
	.ppp__dose-save { justify-content: stretch; }
	.ppp__dose-save-btn { width: 100%; justify-content: center; }
}
.ppp__dose-save-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 10px;
	background: #ffffff;
	color: #0e6a99;
	border: 1.5px solid #1f9edb;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.ppp__dose-save-btn:hover {
	background: #1f9edb;
	color: #ffffff;
}
.ppp__dose-save-btn:focus-visible {
	outline: 2px solid #1f9edb;
	outline-offset: 2px;
}
.ppp__dose-save-btn.is-saving {
	opacity: 0.7;
	cursor: progress;
}
.ppp__dose-save-btn.is-saved {
	background: #E8F4FB;
	color: #0e6a99;
	border-color: #1f9edb;
	cursor: default;
}
.ppp__dose-save-btn[disabled] { cursor: not-allowed; opacity: 0.55; }

/* ============================================================================
 * Saved-card action row — Delete + Save changes (account "Your Peptides")
 * 2026-05-31. Renders bottom of each card in saved mode (planner mode keeps
 * the single Save to my account button via .ppp__dose-save). Delete is the
 * lighter outline; Save changes is the brand-blue primary on the right.
 * ========================================================================== */
.ppp__dose-actions {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}
.ppp__dose-delete-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: transparent;
	color: #6b7280;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ppp__dose-delete-btn:hover {
	background: #FEF3F2;
	color: #b91c1c;
	border-color: #fecaca;
}
.ppp__dose-delete-btn:focus-visible {
	outline: 2px solid #b91c1c;
	outline-offset: 2px;
}
@media (max-width: 540px) {
	.ppp__dose-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.ppp__dose-actions .ppp__dose-save-btn,
	.ppp__dose-actions .ppp__dose-delete-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================================
 * Product hook line (from WC short description) — Phase: hook display
 * Reused in two places: under each search result row + below SYRINGE DRAW
 * inside the dose card. Same styling, scoped to its context.
 * ========================================================================== */
.ppp__result-hook {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
	/* Don't push the "Add" affordance around: clamp to 2 lines max with a
	   graceful ellipsis. The hooks are ~15-20 words so this rarely triggers. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ppp__syringe-hook {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed var(--ppp-border-soft, #F3F4F6);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ppp-text-sec, #6b7280);
}
@media (max-width: 540px) {
	.ppp__result-hook { font-size: 11.5px; }
	.ppp__syringe-hook { font-size: 12px; }
}

/* ============================================================
 * 2026-06-09 MOBILE AUDIT — search-result rows (owner bugs B1/B2/B3).
 * Mirrored in the theme's pp-mobile-fixes.css so LIVE (older build) gets
 * the same treatment until this plugin build ships; keep both in sync.
 * ============================================================ */

/* B1 — a row scrolled half out of the list reads as a clipped vial at the
 * dropdown's top edge. The snap props live on the base .ppp__results-list rule. */
.ppp__results-list .ppp__result-row {
	scroll-snap-align: start;
}

/* B2 — the '+ Add' affordance is hover-revealed and never appears on touch
 * devices, so result rows look inconsistently actioned. Always show it on
 * hover-less inputs. */
@media (hover: none) {
	.ppp__result-row[data-pp-add] .ppp__result-affordance--hint {
		opacity: 1;
		transform: none;
	}
}

/* B3 — the name row's pills wrap raggedly between rows at phone widths.
 * Name takes its own line; pills follow in a fixed order with a fixed gap
 * (dose pill → category pill → matched-term pill). */
@media (max-width: 480px) {
	.ppp__result-name-row {
		gap: 6px;
	}
	.ppp__result-name { flex: 1 0 100%; }
	.ppp__result-dose-pill { order: 1; }
	.ppp__cat-pill { order: 2; }
	.ppp__match-pill { order: 3; }
}