/**
 * CompoundWiki app components: browse, compound cards, detail, glossary,
 * calculator. Built on cw-tokens. Mobile-first. Loaded only where used.
 */

/* Inputs & filters -------------------------------------------------------- */
.cw-input,
.cw-browse__filters input[type="search"],
.cw-browse__filters select {
	font: inherit;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
}

.cw-input:focus-visible,
.cw-browse__filters :focus-visible {
	outline: none;
	border-color: var(--cw-brand, #0369a1);
	box-shadow: var(--cw-ring);
}

.cw-browse__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-2, 0.5rem);
	align-items: center;
	margin-bottom: var(--cw-space-5, 1.5rem);
}

.cw-browse__search {
	flex: 1 1 220px;
}

.cw-browse__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
}

.cw-browse__empty {
	color: var(--cw-text-muted, #475569);
	padding: var(--cw-space-5, 1.5rem) 0;
}

/* Decorative molecular motifs — subtle, subject-relevant engagement --------
   Bonded-atom line art tinted via currentColor (theme-aware), sitting behind
   the hero + CTA copy, plus a "molecule under a magnifier" for empty states. */
.cw-motif {
	position: absolute;
	color: var(--cw-brand, #0369a1);
	pointer-events: none;
	z-index: 0;
}

/* Keep the section content above the motif layer. */
.cw-hero > .cw-container,
.cw-home-cta > *:not(.cw-motif) {
	position: relative;
	z-index: 1;
}

.cw-hero .cw-motif {
	width: clamp(200px, 26vw, 340px);
	height: clamp(200px, 26vw, 340px);
	opacity: 0.09;
}
.cw-hero .cw-motif--a { top: -40px; right: -60px; animation: cw-motif-drift-a 17s ease-in-out infinite; }
.cw-hero .cw-motif--b { bottom: -70px; left: -70px; opacity: 0.06; animation: cw-motif-drift-b 21s ease-in-out infinite; }

.cw-home-cta { position: relative; overflow: hidden; }
.cw-home-cta .cw-motif--cta {
	right: -44px;
	bottom: -52px;
	width: 220px;
	height: 220px;
	opacity: 0.08;
	animation: cw-motif-drift-a 19s ease-in-out infinite;
}

@keyframes cw-motif-drift-a { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(14px) rotate(6deg); } }
@keyframes cw-motif-drift-b { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-8deg); } }

/* Empty-state illustration — the search motif, static + centered. */
.cw-empty { text-align: center; }
.cw-empty__art.cw-motif {
	position: static;
	display: block;
	width: 78px;
	height: 78px;
	margin: 0 auto var(--cw-space-3, 0.75rem);
	opacity: 0.9;
}
.cw-empty p { margin: 0; color: var(--cw-text-muted, #475569); }

@media (prefers-reduced-motion: reduce) {
	.cw-hero .cw-motif,
	.cw-home-cta .cw-motif { animation: none; }
}

/* Card grid honoring --cw-cols -------------------------------------------- */
.cw-grid--cards {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cw-grid--cards {
		grid-template-columns: repeat(var(--cw-cols, 3), minmax(0, 1fr));
	}
}

/* Compound card ----------------------------------------------------------- */
.cw-compound-card {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-2, 0.5rem);
}

.cw-compound-card__title {
	margin: 0;
	font-size: var(--cw-text-lg, 1.125rem);
	font-weight: 700;
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-compound-card__title a {
	color: var(--cw-text, #0f172a);
	text-decoration: none;
}

.cw-compound-card__title a:hover {
	color: var(--cw-brand-strong, #075985);
}

.cw-compound-card__desc {
	margin: 0;
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-compound-card__cta {
	align-self: flex-start;
	margin-top: auto;
}

/* App pages: keep content within the site width even in full-width Elementor
   sections, with consistent vertical rhythm. */
.cw-browse,
.cw-glossary,
.cw-calc-wrap {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Glossary term card ------------------------------------------------------ */
.cw-term-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cw-space-2, 0.5rem);
	overflow: hidden;
	transition: transform var(--cw-transition, 180ms ease), box-shadow var(--cw-transition, 180ms ease), border-color var(--cw-transition, 180ms ease);
}

/* Lime accent rail on hover */
.cw-term-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--cw-gradient-lime);
	opacity: 0;
	transition: opacity var(--cw-transition, 180ms ease);
}

.cw-term-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cw-shadow-md);
	border-color: var(--cw-border-strong, #cdd2c0);
}

.cw-term-card:hover::before {
	opacity: 1;
}

/* Category chip — compact, not a full-width bar */
.cw-term-card .cw-badge {
	align-self: flex-start;
	background: var(--cw-brand-soft, #e0f2fe);
	color: var(--cw-brand-strong, #075985);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
}

.cw-term-card__term {
	margin: 0.15rem 0 0;
	font-size: var(--cw-text-xl, 1.375rem);
	font-weight: 800;
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	color: var(--cw-text, #14180f);
}

.cw-term-card__aliases {
	margin: 0;
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 500;
	color: var(--cw-brand-strong, #075985);
}

.cw-term-card__def {
	margin: 0.25rem 0 0;
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-sm, 0.9rem);
	line-height: 1.6;
}

/* Detail ------------------------------------------------------------------ */
.cw-detail {
	/* Match the navbar exactly: same max-width AND the same side gutter as
	   .cw-container (padding-inline: var(--cw-space-4)). Without the gutter the
	   content ran 16px wider than the navbar on desktop and touched the screen
	   edges on phones/tablets — this lines it up with the header at every width. */
	max-width: var(--cw-container, 1200px);
	margin-inline: auto;
	padding-inline: var(--cw-space-4, 1rem);
}

/* Editorial header band */
.cw-detail__header {
	margin-bottom: var(--cw-space-5, 1.5rem);
	padding-bottom: var(--cw-space-5, 1.5rem);
	border-bottom: 1px solid var(--cw-border, #e5e8db);
}

.cw-detail__title {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	margin: var(--cw-space-3, 0.75rem) 0 var(--cw-space-2, 0.5rem);
}

/* Two-column reference layout: main content + sticky "On this page" rail */
.cw-detail__layout {
	display: block;
}

@media (min-width: 1024px) {
	.cw-detail__layout--toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: var(--cw-space-7, 3rem);
		/* No align-items:start — the TOC column must stretch to the row height
		   so its sticky inner has room to travel while the main column scrolls. */
	}
}

.cw-detail__main { min-width: 0; }

.cw-detail__toc {
	display: none;
}

@media (min-width: 1024px) {
	.cw-detail__layout--toc .cw-detail__toc { display: block; }
}

.cw-detail__toc-inner {
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	padding: var(--cw-space-4, 1rem) var(--cw-space-4, 1rem) var(--cw-space-4, 1rem) var(--cw-space-5, 1.5rem);
	border-left: 2px solid var(--cw-border, #e5e8db);
}

.cw-detail__toc-head {
	display: block;
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cw-text-subtle, #969b86);
	margin-bottom: var(--cw-space-3, 0.75rem);
}

.cw-detail__toc nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cw-detail__toc a {
	display: block;
	padding: 4px 0;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #575d4c);
	text-decoration: none;
	line-height: 1.4;
	transition: color var(--cw-transition, 180ms ease);
}

.cw-detail__toc a:hover { color: var(--cw-text, #14180f); }

.cw-detail__toc a.is-active {
	color: var(--cw-brand-strong, #075985);
	font-weight: 600;
}

.cw-detail__lead {
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-lg, 1.125rem);
	margin: 0 0 var(--cw-space-2, 0.5rem);
}

.cw-detail__aliases {
	color: var(--cw-text-subtle, #94a3b8);
	font-size: var(--cw-text-sm, 0.875rem);
	margin: 0;
}

.cw-tabs {
	display: inline-flex;
	gap: 4px;
	margin: var(--cw-space-5, 1.5rem) 0;
	padding: 4px;
	background: var(--cw-bg-subtle, #f1f5f9);
	border-radius: var(--cw-radius-full, 999px);
}

.cw-tab {
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.5rem 1.1rem;
	border-radius: var(--cw-radius-full, 999px);
	color: var(--cw-text-muted, #475569);
}

.cw-tab.is-active {
	background: var(--cw-surface, #fff);
	color: var(--cw-brand-strong, #075985);
	box-shadow: var(--cw-shadow-sm);
}

.cw-detail__facts {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: var(--cw-space-4, 1rem) 0 var(--cw-space-6, 2rem);
}

.cw-fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: var(--cw-space-4, 1rem) var(--cw-space-5, 1.25rem);
	border-left: 3px solid var(--cw-brand, #0369a1);
}

.cw-fact__label {
	font-size: var(--cw-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-fact__value {
	font-weight: 700;
	color: var(--cw-text, #0f172a);
}

.cw-detail__section {
	margin: 0 0 var(--cw-space-5, 1.5rem);
	padding-bottom: var(--cw-space-5, 1.5rem);
	border-bottom: 1px solid var(--cw-border, #e5e8db);
	scroll-margin-top: 90px;
}

.cw-detail__section:last-of-type {
	border-bottom: 0;
}

.cw-detail__section-title {
	position: relative;
	font-size: var(--cw-text-xl, 1.375rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cw-space-2, 0.5rem);
	margin: 0 0 var(--cw-space-3, 0.75rem);
	padding-left: var(--cw-space-4, 1rem);
}

/* On narrow screens let the Suggest-edit controls drop onto their own line. */
@media (max-width: 560px) {
	.cw-detail__section-title { align-items: flex-start; }
	.cw-detail__section-title .cw-rev__controls { margin-top: 4px; }
}

.cw-detail__section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 999px;
	background: var(--cw-gradient-lime, linear-gradient(135deg, #38bdf8, #0369a1));
}

.cw-detail__section-body {
	padding-left: var(--cw-space-4, 1rem);
}

.cw-chip {
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-brand-soft);
	color: var(--cw-brand-strong, #075985);
}

.cw-detail__section-body {
	color: var(--cw-text-muted, #475569);
}

.cw-detail__refs {
	padding-left: 1.2rem;
	color: var(--cw-text-muted, #475569);
}

.cw-detail__refs li {
	margin-bottom: var(--cw-space-2, 0.5rem);
}

.cw-detail__ref-meta {
	display: block;
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-detail__disclaimer {
	margin-top: var(--cw-space-6, 2rem);
	padding-top: var(--cw-space-4, 1rem);
	border-top: 1px solid var(--cw-border, #e2e8f0);
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-detail__finePrint {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}

/* Structured sections ------------------------------------------------------ */
.cw-table-wrap {
	overflow-x: auto;
}

.cw-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	overflow: hidden;
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-table th {
	text-align: left;
	font-size: var(--cw-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cw-text-subtle, #94a3b8);
	background: var(--cw-bg-subtle, #f8fafc);
	padding: 0.7rem 1rem;
}

.cw-table td {
	padding: 0.7rem 1rem;
	border-top: 1px solid var(--cw-border, #e2e8f0);
	color: var(--cw-text-muted, #475569);
}

.cw-table td:first-child {
	color: var(--cw-text, #0f172a);
	font-weight: 500;
}

.cw-table__num {
	font-variant-numeric: tabular-nums;
}

.cw-interactions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cw-interactions__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cw-space-3, 0.75rem);
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	padding: 0.65rem 1rem;
}

.cw-interactions__name {
	font-weight: 600;
	color: var(--cw-text, #0f172a);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-int-chip {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--cw-radius-full, 999px);
}

.cw-int-chip--synergistic { background: var(--cw-ok-soft); color: var(--cw-ok); }
.cw-int-chip--compatible { background: var(--cw-ev-well-soft); color: var(--cw-ev-well); }
.cw-int-chip--monitor { background: var(--cw-warn-soft); color: var(--cw-warn); }
.cw-int-chip--caution { background: rgba(239, 68, 68, 0.12); color: var(--cw-danger, #ef4444); }

.cw-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: cwstep;
}

.cw-steps__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-steps__num {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-brand-soft);
	color: var(--cw-brand-strong, #075985);
	font-weight: 700;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cw-quality {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cw-quality__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
}

.cw-quality__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: var(--cw-radius-full, 999px);
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cw-quality__row--good .cw-quality__icon { background: var(--cw-ok-soft); color: var(--cw-ok); }
.cw-quality__row--warn .cw-quality__icon { background: var(--cw-warn-soft); color: var(--cw-warn); }
.cw-quality__row--bad .cw-quality__icon { background: rgba(239, 68, 68, 0.12); color: var(--cw-danger, #ef4444); }

.cw-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cw-timeline__row {
	display: flex;
	gap: 14px;
	align-items: baseline;
	border-left: 2px solid var(--cw-brand, #0369a1);
	padding-left: 14px;
}

.cw-timeline__phase {
	flex-shrink: 0;
	min-width: 90px;
	font-weight: 700;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text, #0f172a);
}

.cw-timeline__note {
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-sm, 0.875rem);
}

/* Community revisions ------------------------------------------------------ */
.cw-rev__controls {
	margin-left: auto;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.cw-rev__suggest,
.cw-rev__badge {
	border: 1px solid var(--cw-border, #e2e8f0);
	background: var(--cw-surface, #fff);
	color: var(--cw-text-muted, #475569);
	font: inherit;
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 600;
	padding: 4px 12px;
	border-radius: var(--cw-radius-full, 999px);
	cursor: pointer;
}

.cw-rev__suggest:hover {
	border-color: var(--cw-brand, #0369a1);
	color: var(--cw-brand-strong, #075985);
}

.cw-rev__badge {
	background: var(--cw-warn-soft);
	border-color: transparent;
	color: var(--cw-warn, #b45309);
}

.cw-rev__panel {
	margin-top: var(--cw-space-3, 0.75rem);
	background: var(--cw-bg-subtle, #f8fafc);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-lg, 16px);
	padding: var(--cw-space-4, 1rem) var(--cw-space-5, 1.5rem);
}

.cw-rev__panel h4 {
	margin: 0 0 var(--cw-space-2, 0.5rem);
}

.cw-rev__hint {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-rev__text,
.cw-rev__note {
	width: 100%;
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
	margin-top: var(--cw-space-2, 0.5rem);
}

.cw-rev__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--cw-space-3, 0.75rem);
}

.cw-rev__status.is-ok { color: var(--cw-ok); }
.cw-rev__status.is-bad { color: var(--cw-danger, #ef4444); }

.cw-rev__item {
	border-top: 1px solid var(--cw-border, #e2e8f0);
	padding-top: var(--cw-space-3, 0.75rem);
	margin-top: var(--cw-space-3, 0.75rem);
}

.cw-rev__item:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.cw-rev__meta {
	margin: 0 0 6px;
	font-size: var(--cw-text-sm, 0.875rem);
	font-weight: 600;
}

.cw-rev__diff {
	border-radius: var(--cw-radius-md, 12px);
	padding: 0.6rem 0.85rem;
	font-size: var(--cw-text-sm, 0.875rem);
	margin-bottom: 6px;
	color: var(--cw-text-muted, #475569);
}

.cw-rev__diff span {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
}

.cw-rev__diff--old {
	background: rgba(239, 68, 68, 0.07);
}

.cw-rev__diff--old span { color: var(--cw-danger, #ef4444); }

.cw-rev__diff--new {
	background: var(--cw-ok-soft);
}

.cw-rev__diff--new span { color: var(--cw-ok); }

/* Pagination (theme-independent) ----------------------------------------- */
.cw-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: var(--cw-space-6, 2rem);
}

.cw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text-muted, #475569);
	text-decoration: none;
}

.cw-pagination .page-numbers.current {
	background: var(--cw-gradient-brand);
	color: #fff;
	border-color: transparent;
}

/* Calculator (PepPedia-style stepped wizard) ------------------------------- */
.cw-calculator {
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-lg, 16px);
	box-shadow: var(--cw-shadow-md);
	padding: var(--cw-space-6, 2rem) var(--cw-space-5, 1.5rem);
	max-width: 600px;
	margin-inline: auto;
}

.cw-calc__tabs {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--cw-bg-subtle, #f1f5f9);
	border-radius: var(--cw-radius-full, 999px);
	margin-bottom: var(--cw-space-5, 1.5rem);
	overflow-x: auto;
	scrollbar-width: none;
}

.cw-calc__tab {
	flex: 1;
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: var(--cw-text-muted, #475569);
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	cursor: pointer;
	padding: 0.65rem 0.8rem;
	border-radius: var(--cw-radius-full, 999px);
	transition: background var(--cw-transition, 180ms ease), color var(--cw-transition, 180ms ease);
}

.cw-calc__tab.is-active {
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
	font-weight: 600;
	box-shadow: var(--cw-shadow-sm);
}

.cw-calc__intro {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
	margin: 0 0 var(--cw-space-5, 1.5rem);
}

.cw-calc__hint {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
	margin: 6px 0 var(--cw-space-3, 0.75rem);
}

/* Step headers */
.cw-calc__step {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: var(--cw-space-6, 2rem) 0 var(--cw-space-4, 1rem);
}

.cw-calc__step:first-of-type {
	margin-top: 0;
}

.cw-calc__step-num {
	width: 28px;
	height: 28px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-bg-subtle, #f1f5f9);
	color: var(--cw-text-muted, #475569);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.cw-calc__step-title {
	margin: 0;
	font-size: var(--cw-text-base, 1rem);
	font-weight: 500;
	color: var(--cw-text, #0f172a);
}

/* Fields */
.cw-calc__field {
	display: block;
	margin-bottom: var(--cw-space-3, 0.75rem);
}

.cw-calc__field > span {
	display: block;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
	margin-bottom: 8px;
}

.cw-calc__field > span em {
	font-style: normal;
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-calc__row2 {
	display: grid;
	gap: var(--cw-space-3, 0.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 540px) {
	.cw-calc__row2 {
		grid-template-columns: 1fr 1.2fr;
	}
}

.cw-calc__inputwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	padding: 0.85rem 1rem;
}

.cw-calc__inputwrap:focus-within {
	border-color: var(--cw-brand, #0369a1);
	box-shadow: var(--cw-ring);
}

.cw-calc__inputwrap input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 16px;
	border: 0;
	background: transparent;
	color: var(--cw-text, #0f172a);
}

.cw-calc__inputwrap input:focus {
	outline: none;
}

.cw-calc__suffix {
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-subtle, #94a3b8);
	flex-shrink: 0;
}

/* Pills (vial size, quick diluent, syringe type) */
.cw-calc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cw-calc__pill {
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text-muted, #475569);
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	cursor: pointer;
	transition: all var(--cw-transition, 180ms ease);
}

.cw-calc__pill--sm {
	padding: 0.35rem 0.8rem;
	font-size: var(--cw-text-xs, 0.75rem);
}

.cw-calc__pill:hover {
	background: var(--cw-bg-subtle, #f1f5f9);
}

.cw-calc__pill.is-active {
	background: var(--cw-brand-soft, #eef2ff);
	border-color: var(--cw-brand, #0369a1);
	color: var(--cw-brand-strong, #075985);
	font-weight: 600;
}

/* Segmented (frequency / unit / mode) */
.cw-calc__seg {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--cw-bg-subtle, #f1f5f9);
	border-radius: var(--cw-radius-full, 999px);
	margin-bottom: var(--cw-space-3, 0.75rem);
}

.cw-calc__seg-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	border: 0;
	background: transparent;
	color: var(--cw-text-muted, #475569);
	font: inherit;
	cursor: pointer;
	padding: 0.65rem 0.5rem;
	border-radius: var(--cw-radius-full, 999px);
	transition: background var(--cw-transition, 180ms ease);
}

.cw-calc__seg-btn.is-active {
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
	box-shadow: var(--cw-shadow-sm);
}

.cw-calc__seg-label {
	font-size: var(--cw-text-sm, 0.875rem);
	font-weight: 500;
}

.cw-calc__seg-sub {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}

.cw-calc__mini-seg {
	display: flex;
	gap: 2px;
	padding: 2px;
	background: var(--cw-bg-subtle, #f1f5f9);
	border-radius: var(--cw-radius-full, 999px);
	flex-shrink: 0;
}

.cw-calc__mini-btn {
	border: 0;
	background: transparent;
	color: var(--cw-text-muted, #475569);
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	cursor: pointer;
	padding: 0.35rem 0.75rem;
	border-radius: var(--cw-radius-full, 999px);
}

.cw-calc__mini-btn.is-active {
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
	font-weight: 600;
	box-shadow: var(--cw-shadow-sm);
}

/* Concentration info card */
.cw-calc__conc {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-lg, 16px);
	padding: 1rem 1.25rem;
	margin: var(--cw-space-3, 0.75rem) 0;
	background:
		radial-gradient(at center top, rgba(14, 165, 233, 0.10), transparent 70%),
		var(--cw-surface, #fff);
}

.cw-calc__conc-label {
	margin: 0 0 6px;
	font-family: var(--cw-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cw-text, #0f172a);
	font-weight: 600;
}

.cw-calc__conc-value {
	margin: 0;
	font-size: var(--cw-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--cw-text, #0f172a);
	font-weight: 500;
}

.cw-calc__conc-dim {
	color: var(--cw-text-subtle, #94a3b8);
	font-weight: 400;
}

/* Mix fieldsets */
.cw-calc__mix {
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	padding: var(--cw-space-3, 0.75rem) var(--cw-space-4, 1rem) var(--cw-space-4, 1rem);
	margin: var(--cw-space-4, 1rem) 0;
}

.cw-calc__mix legend {
	font-weight: 600;
	font-size: var(--cw-text-sm, 0.875rem);
	padding: 0 6px;
}

/* Result panel */
.cw-calc__resultwrap {
	border-top: 2px solid var(--cw-border, #e2e8f0);
	margin-top: var(--cw-space-6, 2rem);
	padding-top: var(--cw-space-5, 1.5rem);
}

.cw-calc__result-title {
	margin: 0 0 var(--cw-space-4, 1rem);
	font-weight: 600;
}

.cw-calc__recipe-card {
	background: var(--cw-bg-subtle, #f8fafc);
	border-radius: var(--cw-radius-lg, 16px);
	overflow: hidden;
	margin-bottom: var(--cw-space-4, 1rem);
}

.cw-calc__recipe-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.1rem 1.25rem;
}

.cw-calc__recipe-num {
	width: 40px;
	height: 40px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-brand);
	color: #fff;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cw-calc__recipe-step h5 {
	margin: 0 0 2px;
	font-size: var(--cw-text-base, 1rem);
	font-weight: 600;
	color: var(--cw-text, #0f172a);
}

.cw-calc__recipe-step p {
	margin: 0;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
}

.cw-calc__recipe-divider {
	border-top: 1px solid var(--cw-border, #e2e8f0);
}

/* Syringe visualization */
.cw-calc__syr-panel {
	background: var(--cw-bg-subtle, #f8fafc);
	border-radius: var(--cw-radius-lg, 16px);
	padding: var(--cw-space-5, 1.5rem);
	margin-bottom: var(--cw-space-4, 1rem);
	text-align: center;
}

.cw-syr {
	position: relative;
	display: inline-block;
	padding-top: 64px;
}

.cw-syr svg {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.08));
}

.cw-syr__bubble {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cw-brand-soft, #eef2ff);
	border: 1px solid var(--cw-brand, #0369a1);
	border-radius: var(--cw-radius-md, 12px);
	padding: 6px 14px;
	min-width: 64px;
	text-align: center;
}

.cw-syr__bubble-label {
	display: block;
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-brand-strong, #075985);
	font-weight: 600;
}

.cw-syr__bubble-value {
	display: block;
	font-size: var(--cw-text-lg, 1.125rem);
	font-weight: 800;
	color: var(--cw-text, #0f172a);
}

.cw-syr__barrel {
	fill: transparent;
	stroke: var(--cw-border-strong, #cbd5e1);
	stroke-width: 2;
}

.cw-syr__tick {
	stroke: var(--cw-text-subtle, #94a3b8);
	stroke-width: 1;
}

.cw-syr__grid {
	stroke: var(--cw-border, #e2e8f0);
	stroke-width: 0.5;
	opacity: 0.6;
}

.cw-syr__num {
	fill: var(--cw-text-subtle, #94a3b8);
}

.cw-syr__liquid {
	fill: url(#cwLiquid);
	fill: var(--cw-brand, #0369a1);
	opacity: 0.85;
	transition: all 75ms ease-out;
}

.cw-syr__plunger,
.cw-syr__plunger2,
.cw-syr__needle,
.cw-syr__tip {
	fill: var(--cw-border-strong, #cbd5e1);
}

.cw-syr__volume {
	margin: var(--cw-space-2, 0.5rem) 0 0;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-brand-strong, #075985);
}

.cw-calc__syr-select {
	margin-top: var(--cw-space-4, 1rem);
}

.cw-calc__syr-select .cw-calc__pills {
	justify-content: center;
}

.cw-calc__syr-select-label {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
	margin-bottom: 8px;
}

.cw-calc__syr-caption {
	margin: 10px 0 0;
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}

/* Stats grid */
.cw-calc__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cw-space-3, 0.75rem);
	margin-bottom: var(--cw-space-3, 0.75rem);
}

.cw-calc__stat {
	background: var(--cw-bg-subtle, #f8fafc);
	border-radius: var(--cw-radius-md, 12px);
	padding: 0.8rem 0.5rem;
	text-align: center;
}

.cw-calc__stat-value {
	font-size: var(--cw-text-lg, 1.125rem);
	font-weight: 700;
	color: var(--cw-text, #0f172a);
}

.cw-calc__stat-label {
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
	margin-top: 2px;
}

/* Warnings + reset */
.cw-calc__warn {
	margin: 0 0 var(--cw-space-3, 0.75rem);
	padding: var(--cw-space-3, 0.75rem) var(--cw-space-4, 1rem) var(--cw-space-3, 0.75rem) 2rem;
	background: var(--cw-warn-soft, #fffbeb);
	border-radius: var(--cw-radius-md, 12px);
	color: var(--cw-warn, #b45309);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-calc__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cw-space-2, 0.5rem);
	margin: var(--cw-space-4, 1rem) auto 0;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--cw-btn-ghost-border, var(--cw-border-strong, #ced3c0));
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-btn-ghost-bg, var(--cw-surface, #fff));
	color: var(--cw-btn-ghost-fg, var(--cw-text, #14180f));
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--cw-transition, 180ms ease), color var(--cw-transition, 180ms ease), background var(--cw-transition, 180ms ease);
}

/* Center the pill-width reset button within the results panel. */
.cw-calc__reset-wrap {
	text-align: center;
}

.cw-calc__reset:hover {
	border-color: var(--cw-brand, #0369a1);
	color: var(--cw-brand, #0369a1);
	background: var(--cw-brand-soft, #e0f2fe);
}

/* Ask / Research Assistant chat ------------------------------------------ */
/* Base wrapper (also the compact "search box" used on the home hero) */
.cw-ask {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-xl, 24px);
	box-shadow: var(--cw-shadow-sm);
	padding: var(--cw-space-5, 1.5rem);
}

.cw-ask[data-redirect] .cw-ask__thread { display: none; }

/* Redirect/search mode (home hero) stays a centered, contained box even inside
   a full-width Elementor section. */
.cw-ask[data-redirect] {
	width: min(760px, 100% - 2rem);
	margin-inline: auto;
}

/* Full chat experience — the dedicated Ask page: a real conversation column
   with the composer docked at the bottom and the thread scrolling above it. */
.cw-ask:not([data-redirect]) {
	/* width (not max-width) with a built-in gutter so the card never touches the
	   screen edges on phones — the Ask page's Elementor column has zero side
	   padding, so without this the chat card was full-bleed on mobile. Matches
	   the home-hero ask box's min(…, 100% - 2rem) pattern. */
	width: min(780px, 100% - 2rem);
	margin-inline: auto;
	height: min(76vh, 720px);
	padding: 0;
	overflow: hidden;
}

.cw-ask:not([data-redirect]) .cw-ask__heading {
	flex-shrink: 0;
	margin: 0;
	padding: 1.05rem 1.4rem;
	font-size: 1.1rem;
	border-bottom: 1px solid var(--cw-border, #e2e8f0);
}

.cw-ask:not([data-redirect]) .cw-ask__thread {
	flex: 1;
	max-height: none;
	margin: 0;
	padding: 1.5rem 1.4rem 0.75rem;
}

.cw-ask:not([data-redirect]) .cw-ask__chips {
	flex-shrink: 0;
	margin: 0;
	padding: 0 1.4rem 0.6rem;
}

.cw-ask:not([data-redirect]) .cw-ask__form {
	flex-shrink: 0;
	margin: 0 1.4rem;
}

.cw-ask:not([data-redirect]) .cw-ask__disclaimer {
	flex-shrink: 0;
	margin: 0.55rem 1.4rem 1rem;
	text-align: center;
}

.cw-ask__heading {
	margin: 0 0 var(--cw-space-4, 1rem);
	font-size: clamp(1.4rem, 3vw, 2rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

/* Composer — a rounded field that grows with the textarea, send docked right */
.cw-ask__form {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: 22px;
	background: var(--cw-surface, #fff);
	box-shadow: var(--cw-shadow-sm);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cw-ask__form:focus-within {
	border-color: var(--cw-brand, #0369a1);
	box-shadow: var(--cw-ring);
}

.cw-ask__input {
	flex: 1;
	min-width: 0;
	font: inherit;
	line-height: 1.5;
	max-height: 160px;
	padding: 0.5rem 0.4rem 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--cw-text, #0f172a);
	resize: none;
	overflow-y: auto;
}

textarea.cw-ask__input {
	height: 40px;
}

.cw-ask__input:focus {
	outline: none;
}

.cw-ask__send {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-lime);
	color: var(--cw-ink, #14180f);
	cursor: pointer;
	box-shadow: var(--cw-shadow-lime);
	transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease;
}

.cw-ask__send:hover {
	transform: scale(1.06);
	filter: saturate(1.1);
}

.cw-ask__send:active {
	transform: scale(0.94);
}

.cw-ask__form.is-busy .cw-ask__send {
	opacity: 0.5;
	pointer-events: none;
}

/* Suggested prompt chips */
.cw-ask__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--cw-space-4, 1rem) 0 var(--cw-space-5, 1.5rem);
}

.cw-ask__chips[hidden] {
	display: none;
}

.cw-ask__chip {
	border: 1px solid var(--cw-border, #e2e8f0);
	background: var(--cw-surface, #fff);
	color: var(--cw-text-muted, #475569);
	font: inherit;
	font-size: var(--cw-text-sm, 0.875rem);
	padding: 0.45rem 0.9rem;
	border-radius: var(--cw-radius-full, 999px);
	cursor: pointer;
	transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}

.cw-ask__chip:hover {
	border-color: var(--cw-brand, #0369a1);
	color: var(--cw-brand-strong, #075985);
	background: var(--cw-gradient-brand-soft);
	transform: translateY(-1px);
}

/* Conversation thread */
.cw-ask__thread {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	margin-bottom: var(--cw-space-4, 1rem);
	padding-right: 2px;
	max-height: 460px;
	overflow-y: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

.cw-ask__thread:empty {
	display: none;
	margin: 0;
}

.cw-ask__thread::-webkit-scrollbar { width: 8px; }
.cw-ask__thread::-webkit-scrollbar-thumb {
	background: var(--cw-border, #e2e8f0);
	border-radius: 999px;
}
.cw-ask__thread::-webkit-scrollbar-thumb:hover { background: var(--cw-text-subtle, #94a3b8); }

/* Message row = optional avatar + message; animates in */
.cw-chat__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 100%;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 300ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cw-chat__row.is-in {
	opacity: 1;
	transform: none;
}

.cw-chat__row--user {
	flex-direction: row-reverse;
}

.cw-chat__avatar {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin-top: 1px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-brand);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cw-shadow-brand);
}

.cw-chat__msg {
	font-size: 0.95rem;
	line-height: 1.65;
	word-wrap: break-word;
}

.cw-chat__msg p {
	margin: 0 0 0.6em;
}

.cw-chat__msg p:last-child {
	margin-bottom: 0;
}

/* Assistant — roomy, no heavy bubble (Claude/ChatGPT feel) */
.cw-chat__msg--assistant {
	flex: 1;
	min-width: 0;
	padding-top: 3px;
	color: var(--cw-text, #0f172a);
}

/* User — a soft bubble tucked to the right */
.cw-chat__msg--user {
	max-width: 80%;
	padding: 0.6rem 0.95rem;
	background: var(--cw-bg-subtle, #f1f5f9);
	color: var(--cw-text, #0f172a);
	border-radius: 18px;
	border-bottom-right-radius: 6px;
}

.cw-chat__typing {
	display: inline-flex;
	gap: 4px;
	padding: 6px 0;
}

.cw-chat__typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cw-text-subtle, #94a3b8);
	animation: cw-typing 1.2s infinite ease-in-out;
}

.cw-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.cw-chat__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes cw-typing {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* Compound cards inside an answer */
.cw-chat__cards {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-2, 0.5rem);
	margin-top: 0.9rem;
}

.cw-chat__card {
	display: flex;
	gap: 12px;
	align-items: center;
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: 14px;
	padding: 0.7rem 0.85rem;
	color: inherit;
	text-decoration: none;
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

a.cw-chat__card:hover {
	border-color: var(--cw-brand, #0369a1);
	transform: translateY(-1px);
	box-shadow: var(--cw-shadow-sm);
	color: inherit;
}

.cw-chat__card-arrow {
	margin-left: auto;
	align-self: center;
	color: var(--cw-text-subtle, #94a3b8);
	transition: transform 180ms ease, color 180ms ease;
}

a.cw-chat__card:hover .cw-chat__card-arrow {
	color: var(--cw-brand-strong, #075985);
	transform: translateX(3px);
}

.cw-chat__card-abbr {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--cw-gradient-brand-soft);
	color: var(--cw-brand-strong, #075985);
	font-weight: 700;
	font-size: var(--cw-text-xs, 0.75rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cw-chat__card-body {
	min-width: 0;
}

.cw-chat__card-body h4 {
	margin: 0 0 2px;
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-chat__card-body p {
	margin: 0 0 6px;
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-xs, 0.75rem);
	line-height: 1.45;
}

/* Floating launcher */
.cw-chat-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9000;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-lime);
	color: var(--cw-ink, #14180f);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cw-shadow-lime), 0 10px 30px -8px rgba(3, 105, 161, 0.5);
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}

.cw-chat-fab::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
	animation: cw-fab-pulse 2.6s ease-out infinite;
}

@keyframes cw-fab-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
	70%  { box-shadow: 0 0 0 16px rgba(14, 165, 233, 0); }
	100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.cw-chat-fab:hover {
	transform: translateY(-2px) scale(1.06);
}

.cw-chat-fab.is-active {
	transform: rotate(90deg) scale(0.9);
}

.cw-chat-fab.is-active::after { animation: none; }

.cw-chat-panel {
	position: fixed;
	z-index: 9001;
	right: 20px;
	bottom: 20px;
	top: auto;
	height: min(640px, calc(100vh - 40px));
	width: min(400px, calc(100vw - 32px));
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-xl, 24px);
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.4), var(--cw-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	transform: translateY(16px) scale(0.96);
	opacity: 0;
	pointer-events: none;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.cw-chat-panel.is-open {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.cw-chat-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 1rem 1.1rem;
	background: var(--cw-gradient-brand);
	color: #fff;
}

.cw-chat-panel__head::before {
	content: "";
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--cw-radius-full, 999px);
	background: rgba(255, 255, 255, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.cw-chat-panel__head h3 {
	margin: 0;
	flex: 1;
	font-size: var(--cw-text-lg, 1.05rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	line-height: 1.15;
}

.cw-chat-panel__head h3 small {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	opacity: 0.85;
	letter-spacing: 0;
}

.cw-chat-panel__head h3 small::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 50%;
	background: #34d399;
	vertical-align: middle;
}

.cw-chat-panel__close {
	border: 0;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cw-radius-full, 999px);
	transition: background 160ms ease;
}

.cw-chat-panel__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.cw-chat-panel__body {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0.9rem 0.9rem 1rem;
	background:
		radial-gradient(120% 60% at 100% 0%, var(--cw-gradient-brand-soft, #eef2ff) 0%, transparent 55%),
		var(--cw-surface, #fff);
}

/* Reset the full-height Ask-page insets when the widget is inside the panel */
.cw-chat-panel__body .cw-ask,
.cw-chat-panel__body .cw-ask:not([data-redirect]) {
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
	height: auto;
	background: transparent;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: visible;
}

.cw-chat-panel__body .cw-ask__heading { display: none; }

.cw-chat-panel__body .cw-ask__thread,
.cw-chat-panel__body .cw-ask__chips,
.cw-chat-panel__body .cw-ask__form,
.cw-chat-panel__body .cw-ask__disclaimer {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.cw-chat-panel__body .cw-ask__thread {
	flex: 1;
	max-height: none;
	padding-top: 0.25rem;
}

.cw-chat-panel__body .cw-ask__chips { padding-bottom: 0.6rem; }

.cw-chat-panel__body .cw-ask__disclaimer {
	margin-top: 0.55rem;
	text-align: center;
}

.cw-ask__disclaimer {
	margin-top: var(--cw-space-3, 0.75rem);
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #94a3b8);
}
.cw-ask__disclaimer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cw-ask__disclaimer a:hover {
	color: var(--cw-brand, #0369a1);
}

@media (max-width: 640px) {
	.cw-ask:not([data-redirect]) {
		height: calc(100vh - 160px);
		border-radius: var(--cw-radius-lg, 16px);
	}
}

@media (max-width: 480px) {
	.cw-chat-panel {
		/* Small inset instead of full-bleed: a fixed element pinned to the
		   viewport edges spans the scrollbar gutter (100vw) and forces a
		   sideways scroll. A tiny inset keeps its right edge inside the
		   content area. */
		inset: 10px;
		width: auto;
		height: auto;
		max-height: none;
		border-radius: var(--cw-radius-lg, 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-chat__row,
	.cw-chat-panel,
	.cw-chat-fab,
	.cw-chat-fab::after { transition: none; animation: none; transform: none; }
	.cw-chat-panel.is-open { transform: none; }
	.cw-ask__thread { scroll-behavior: auto; }
}

/* Dashboard / charts / body map ------------------------------------------ */
.cw-dash {
	display: grid;
	gap: var(--cw-space-5, 1.5rem);
}

/* Overview stats — icon + big number + label, split by dividers */
.cw-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.cw-dash__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 1.6rem 1rem;
	text-align: center;
}

.cw-dash__stat + .cw-dash__stat {
	border-left: 1px solid var(--cw-border, #e5e8db);
}

.cw-dash__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 2px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-brand-soft);
	color: var(--cw-brand-strong, #075985);
}

.cw-dash__stat-value {
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	color: var(--cw-brand-strong, #075985);
	font-variant-numeric: tabular-nums;
}

.cw-dash__stat-label {
	font-size: var(--cw-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cw-text-subtle, #969b86);
}

@media (max-width: 560px) {
	.cw-dash__stats { grid-template-columns: 1fr; }
	.cw-dash__stat + .cw-dash__stat { border-left: 0; border-top: 1px solid var(--cw-border, #e5e8db); }
}

/* Trends — range tabs beside the heading, each metric in its own mini-panel */
.cw-dash__trends-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--cw-space-4, 1rem);
}

.cw-dash__trends-head h3 { margin: 0; }

.cw-dash__trends-head .cw-tabs--range { margin: 0; }

.cw-trend-grid {
	display: grid;
	gap: var(--cw-space-3, 0.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.cw-trend-grid { grid-template-columns: 1fr 1fr; }
}

.cw-trend {
	padding: var(--cw-space-4, 1rem);
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-lg, 16px);
	background: var(--cw-surface-2, #f7f8f3);
}

.cw-trend__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text, #14180f);
}

.cw-trend__chart {
	min-height: 56px;
	display: flex;
	align-items: center;
}

.cw-trend__chart svg { width: 100%; }

.cw-chart {
	width: 100%;
	height: auto;
}

.cw-chart__line {
	fill: none;
	stroke: var(--cw-brand, #0369a1);
	stroke-width: 2;
}

.cw-chart__area {
	fill: var(--cw-brand, #0369a1);
	opacity: 0.08;
}

.cw-chart__dot {
	fill: var(--cw-brand-strong, #075985);
}

.cw-chart__empty {
	color: var(--cw-text-subtle, #94a3b8);
	font-size: var(--cw-text-sm, 0.875rem);
}

/* Injection-site map: a compact, labelled diagram (not a mystery shape) */
.cw-bodymap-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var(--cw-space-4, 1rem);
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-lg, 16px);
	background: var(--cw-surface-2, #f7f8f3);
}

.cw-bodymap-wrap .cw-log-heading { margin: 0; }

.cw-bodymap {
	align-self: center;
	width: 190px;
	max-width: 100%;
}

.cw-bodymap svg {
	display: block;
	width: 100%;
	height: auto;
}

.cw-bodymap-hint {
	margin: 0;
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #969b86);
	line-height: 1.5;
}

.cw-bodymap__region {
	fill: var(--cw-brand, #0369a1);
	fill-opacity: 0.12;
	stroke: var(--cw-border-strong, #cfd4c2);
	stroke-width: 1.5;
	cursor: pointer;
	transition: stroke var(--cw-transition, 180ms ease), stroke-width var(--cw-transition, 180ms ease);
}

.cw-bodymap__region:hover {
	stroke: var(--cw-brand, #0369a1);
	stroke-width: 2.5;
}

.cw-form-grid {
	display: grid;
	gap: var(--cw-space-4, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: end;
}

/* Each field: label on top, control below — styled like the design system. */
.cw-form-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--cw-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--cw-text-muted, #575d4c);
}

.cw-form-grid input,
.cw-form-grid select,
.cw-form-grid textarea {
	font: inherit;
	font-weight: 400;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #14180f);
	transition: border-color var(--cw-transition, 180ms ease), box-shadow var(--cw-transition, 180ms ease);
}

.cw-form-grid select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23575d4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	padding-right: 2rem;
}

.cw-form-grid input:focus,
.cw-form-grid select:focus,
.cw-form-grid textarea:focus {
	outline: none;
	border-color: var(--cw-brand, #0369a1);
	box-shadow: var(--cw-ring);
}

.cw-form-grid input::placeholder { color: var(--cw-text-subtle, #969b86); }

.cw-form-grid .cw-btn {
	align-self: end;
	min-height: 44px;
}

.cw-tabs--range {
	margin: 0 0 var(--cw-space-4, 1rem);
}

.cw-dash__notice {
	background: var(--cw-warn-soft);
	color: var(--cw-warn, #b26200);
	padding: var(--cw-space-3, 0.75rem) var(--cw-space-4, 1rem);
	border-radius: var(--cw-radius-md, 12px);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-login-needed {
	text-align: center;
	color: var(--cw-text-muted, #475569);
}

/* Native auth ------------------------------------------------------------- */
.cw-auth {
	max-width: 440px;
	margin-inline: auto;
}

.cw-auth__tabs {
	display: flex;
	width: 100%;
	margin: 0 0 var(--cw-space-5, 1.5rem);
}

.cw-auth__tabs .cw-tab {
	flex: 1;
	text-align: center;
	text-decoration: none;
}

.cw-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-3, 0.75rem);
}

.cw-auth__form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--cw-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--cw-text, #0f172a);
}

.cw-auth__form input[type="text"],
.cw-auth__form input[type="email"],
.cw-auth__form input[type="password"] {
	font: inherit;
	font-weight: 400;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cw-border, #e2e8f0);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #0f172a);
}

.cw-auth__form input:focus-visible {
	outline: none;
	border-color: var(--cw-brand, #0369a1);
	box-shadow: var(--cw-ring);
}

.cw-auth__remember {
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
	color: var(--cw-text-muted, #475569) !important;
}

.cw-auth__form .cw-btn {
	margin-top: var(--cw-space-2, 0.5rem);
}

.cw-auth__link {
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
	text-align: center;
}

.cw-auth__error {
	background: rgba(239, 68, 68, 0.1);
	color: var(--cw-danger, #ef4444);
	padding: var(--cw-space-3, 0.75rem) var(--cw-space-4, 1rem);
	border-radius: var(--cw-radius-md, 12px);
	font-size: var(--cw-text-sm, 0.875rem);
	margin: 0 0 var(--cw-space-4, 1rem);
}

.cw-auth__notice {
	background: var(--cw-brand-soft, #e0f2fe);
	color: var(--cw-brand-strong, #075985);
	padding: var(--cw-space-3, 0.75rem) var(--cw-space-4, 1rem);
	border-radius: var(--cw-radius-md, 12px);
	font-size: var(--cw-text-sm, 0.875rem);
	margin: 0 0 var(--cw-space-4, 1rem);
}

.cw-auth__head { margin-bottom: var(--cw-space-4, 1rem); }

.cw-auth__title {
	margin: 0;
	font-size: var(--cw-text-xl, 1.375rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-auth__lead {
	margin: 0 0 var(--cw-space-4, 1rem);
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-sm, 0.9rem);
	line-height: 1.55;
}

.cw-account-link--logout {
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #475569);
	align-self: center;
}

/* Dashboard: account header ------------------------------------------------ */
.cw-dashpage { max-width: var(--cw-container, 1200px); }

/* Breadcrumb -------------------------------------------------------------- */
.cw-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--cw-space-4, 1rem);
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #575d4c);
}
/* When the breadcrumb is the first thing on a page, give it breathing room. */
.cw-browse > .cw-breadcrumb:first-child,
.cw-glossary > .cw-breadcrumb:first-child,
.cw-calc-wrap > .cw-breadcrumb:first-child,
.cw-ask-crumb > .cw-breadcrumb,
.cw-detail > .cw-breadcrumb:first-child {
	margin-top: var(--cw-space-2, 0.5rem);
}
.cw-ask-crumb { margin-bottom: var(--cw-space-2, 0.5rem); }
.cw-breadcrumb a { color: var(--cw-text-muted, #575d4c); text-decoration: none; }
.cw-breadcrumb a:hover { color: var(--cw-brand-strong, #075985); }
.cw-breadcrumb__sep { color: var(--cw-text-subtle, #969b86); }
.cw-breadcrumb__current { color: var(--cw-text, #14180f); font-weight: 600; }

/* Two-column dashboard: sidebar + content --------------------------------- */
.cw-dash-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cw-space-5, 1.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.cw-dash-layout { grid-template-columns: 264px minmax(0, 1fr); }
}

.cw-dash-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-4, 1rem);
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-xl, 24px);
	box-shadow: var(--cw-shadow-sm);
	padding: var(--cw-space-5, 1.5rem);
}

@media (min-width: 900px) {
	.cw-dash-sidebar { position: sticky; top: 92px; }
}

.cw-dash-user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cw-dash-user__id { min-width: 0; }

.cw-dash-user__name {
	display: block;
	font-size: var(--cw-text-lg, 1.125rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cw-dash-user__role { margin-top: 4px; }

.cw-dash-user__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding-bottom: var(--cw-space-4, 1rem);
	border-bottom: 1px solid var(--cw-border, #e5e8db);
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #969b86);
	word-break: break-word;
}

.cw-dash-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cw-dash-nav a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.55rem 0.75rem 0.55rem 1rem;
	border-radius: var(--cw-radius-md, 12px);
	color: var(--cw-text-muted, #575d4c);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--cw-text-sm, 0.9rem);
	transition: background var(--cw-transition, 180ms ease), color var(--cw-transition, 180ms ease);
}

.cw-dash-nav a:hover {
	background: var(--cw-bg-subtle, #edf0e5);
	color: var(--cw-text, #14180f);
}

/* Active section — lime accent bar + brand text so the current view is obvious */
.cw-dash-nav a.is-active {
	background: var(--cw-brand-soft, #e0f2fe);
	color: var(--cw-brand-strong, #075985);
	font-weight: 700;
}
.cw-dash-nav a.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.05rem;
	border-radius: 999px;
	background: var(--cw-brand, #0369a1);
}

.cw-dash-sidebar__foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: var(--cw-space-4, 1rem);
	border-top: 1px solid var(--cw-border, #e5e8db);
}

.cw-dash-sidebar__foot .cw-btn { justify-content: center; }

.cw-dash-main { min-width: 0; }

/* Log-a-dose: body map beside the recent-doses list */
.cw-dash__dose-body {
	display: grid;
	gap: var(--cw-space-4, 1rem);
	margin-top: var(--cw-space-4, 1rem);
}

@media (min-width: 620px) {
	.cw-dash__dose-body { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

.cw-dash__dose-side { min-width: 0; }

.cw-account-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-4, 1rem);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cw-space-5, 1.5rem);
}

.cw-account-head__id {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.cw-account-head__avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-lime);
	color: var(--cw-ink, #14180f);
	font-weight: 800;
	font-size: 1.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cw-shadow-lime);
}

.cw-account-head__name {
	margin: 0;
	font-size: var(--cw-text-xl, 1.375rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-account-head__meta {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #575d4c);
}

.cw-account-head__since { color: var(--cw-text-subtle, #969b86); }

.cw-account-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cw-account-head__signout:hover {
	border-color: var(--cw-danger, #ef4444);
	color: var(--cw-danger, #ef4444);
}

.cw-dash__data-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--cw-space-3, 0.75rem);
}

.cw-dash__data-note {
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-sm, 0.875rem);
	margin: 0;
}

@media (max-width: 560px) {
	.cw-account-head { flex-direction: column; align-items: flex-start; }
	.cw-account-head__actions { width: 100%; }
}

/* Home marketing sections -------------------------------------------------- */
.cw-home-section {
	padding: var(--cw-space-7, 3rem) 0;
}

.cw-home-stats-wrap {
	padding-top: var(--cw-space-6, 2rem);
}

.cw-home-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cw-space-4, 1rem);
	padding: var(--cw-space-5, 1.5rem);
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-xl, 24px);
	box-shadow: var(--cw-shadow-sm);
}

.cw-home-stat {
	text-align: center;
	padding: var(--cw-space-2, 0.5rem);
}

.cw-home-stat__num {
	display: block;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--cw-tracking-tight, -0.02em);
	background: var(--cw-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.cw-home-stat__label {
	display: block;
	margin-top: 6px;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-text-muted, #575d4c);
}

.cw-home-head {
	max-width: 640px;
	margin: 0 auto var(--cw-space-6, 2rem);
	text-align: center;
}

.cw-home-head__title {
	margin: var(--cw-space-3, 0.75rem) 0 var(--cw-space-2, 0.5rem);
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-home-head__lead {
	margin: 0;
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-lg, 1.125rem);
}

.cw-home-features {
	display: grid;
	gap: var(--cw-space-4, 1rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cw-home-features { grid-template-columns: repeat(2, 1fr); }
	.cw-home-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
	.cw-home-features { grid-template-columns: repeat(4, 1fr); }
}

.cw-home-feature {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cw-home-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--cw-radius-md, 12px);
	/* Use the primary-button tokens so the icon chip matches the CTA buttons in
	   both themes: deep navy-blue tile + white glyph on the white light theme
	   (strong, clinical, no washed-out cyan), and a bright sky chip + dark glyph
	   on the dark theme so it still pops against the navy page. */
	background: var(--cw-btn-primary-bg);
	color: var(--cw-btn-primary-fg);
	box-shadow: var(--cw-btn-primary-shadow);
}

/* Elementor renders these as filled Font Awesome inline SVGs (e-font-icon-svg),
   so paint them as a solid dark glyph on the lime chip. Also keep our own
   stroke-based Feather icons working if the shortcode fallback is used. */
.cw-home-feature__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: currentColor;
}
.cw-home-feature__icon .e-font-icon-svg,
.cw-home-feature__icon svg[viewBox="0 0 384 512"],
.cw-home-feature__icon svg[viewBox="0 0 448 512"],
.cw-home-feature__icon svg[viewBox="0 0 512 512"],
.cw-home-feature__icon svg[viewBox="0 0 576 512"],
.cw-home-feature__icon svg[viewBox="0 0 640 512"] {
	fill: currentColor !important;
	stroke: none !important;
}

.cw-home-feature__title {
	margin: 0;
	font-size: var(--cw-text-lg, 1.125rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-home-feature__desc {
	margin: 0;
	color: var(--cw-text-muted, #475569);
	font-size: var(--cw-text-sm, 0.875rem);
	line-height: 1.6;
}

/* Featured feature — draws the eye to the dose calculator ------------------ */
.cw-home-feature--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform var(--cw-transition), box-shadow var(--cw-transition), border-color var(--cw-transition);
}

.cw-home-feature--featured {
	position: relative;
	border-color: var(--cw-brand, #0369a1);
	background: linear-gradient(180deg, var(--cw-brand-soft, #e0f2fe) 0%, var(--cw-surface, #fff) 58%);
	animation: cw-feature-pulse 2.8s ease-in-out infinite;
}

/* Breathing accent ring so it reads as the interactive/highlighted card. */
@keyframes cw-feature-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0), var(--cw-shadow-sm); }
	50%      { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16), 0 14px 30px -12px rgba(14, 165, 233, 0.45); }
}

.cw-home-feature--featured:hover {
	transform: translateY(-3px);
	border-color: var(--cw-brand-strong, #075985);
}

/* Soft pulsing halo on the featured icon. */
.cw-home-feature--featured .cw-home-feature__icon {
	animation: cw-icon-glow 2.8s ease-in-out infinite;
}

@keyframes cw-icon-glow {
	0%, 100% { box-shadow: var(--cw-btn-primary-shadow); }
	50%      { box-shadow: var(--cw-btn-primary-shadow), 0 0 0 6px rgba(14, 165, 233, 0.14); }
}

.cw-home-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-weight: 700;
	font-size: var(--cw-text-sm, 0.875rem);
	color: var(--cw-brand, #0369a1);
}

.cw-home-feature__cta svg {
	transition: transform var(--cw-transition);
}

.cw-home-feature--link:hover .cw-home-feature__cta svg {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.cw-home-feature--featured,
	.cw-home-feature--featured .cw-home-feature__icon {
		animation: none;
	}
	.cw-home-feature--featured {
		box-shadow: 0 0 0 1px var(--cw-brand, #0369a1), var(--cw-shadow-sm);
	}
	.cw-home-feature--link:hover .cw-home-feature__cta svg {
		transform: none;
	}
}

.cw-home-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.cw-home-cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.6rem 0.75rem 0.6rem 1.05rem;
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-surface, #fff);
	color: var(--cw-text, #14180f);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--cw-text-sm, 0.875rem);
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cw-home-cat:hover {
	border-color: var(--cw-brand, #0369a1);
	transform: translateY(-1px);
	box-shadow: var(--cw-shadow-sm);
	color: var(--cw-text, #14180f);
}

.cw-home-cat__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-brand-soft, #e0f2fe);
	color: var(--cw-brand-strong, #075985);
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 700;
}

.cw-home-cta {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) var(--cw-space-5, 1.5rem);
	border-radius: var(--cw-radius-xl, 24px);
	background:
		radial-gradient(120% 120% at 50% 0%, var(--cw-gradient-brand-soft, #e0f2fe) 0%, transparent 60%),
		var(--cw-surface, #fff);
	border: 1px solid var(--cw-border, #e5e8db);
	box-shadow: var(--cw-shadow-sm);
}

.cw-home-cta__title {
	margin: 0 0 var(--cw-space-2, 0.5rem);
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	letter-spacing: var(--cw-tracking-tight, -0.02em);
}

.cw-home-cta__lead {
	margin: 0 auto var(--cw-space-5, 1.5rem);
	max-width: 520px;
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-lg, 1.125rem);
}

.cw-home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Toast — transient confirmation popup ------------------------------------ */
.cw-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(14px);
	z-index: 10000;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100vw - 32px);
	padding: 0.7rem 1.15rem;
	border-radius: var(--cw-radius-full, 999px);
	/* Fixed dark surface (NOT var(--cw-ink) — that flips to near-white in dark
	   mode and hid the white text). #1e293b reads dark on the white light theme
	   and sits a step lighter than the navy dark-theme page, so #fff text is
	   legible in both; the hairline keeps it separated on dark backgrounds. */
	background: #1e293b;
	color: #fff;
	border: 1px solid rgba(148, 163, 184, 0.18);
	font-size: var(--cw-text-sm, 0.9rem);
	font-weight: 600;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cw-toast.is-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.cw-toast::before {
	content: "✓";
	color: var(--cw-lime-bright, #38bdf8);
	font-weight: 800;
}

.cw-toast--err {
	background: #b91c1c;
}

.cw-toast--err::before {
	content: "!";
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cw-toast { transition: opacity 200ms ease; transform: translateX(-50%); }
}

/* Dashboard log lists (recent doses / metrics) ---------------------------- */
.cw-log-heading {
	margin: var(--cw-space-4, 1rem) 0 var(--cw-space-2, 0.5rem);
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cw-text-subtle, #969b86);
}

.cw-log-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cw-log-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-md, 12px);
	background: var(--cw-surface, #fff);
	font-size: var(--cw-text-sm, 0.875rem);
}

.cw-log-item__main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-width: 0;
	flex: 1;
}

.cw-log-item__main strong { color: var(--cw-text, #14180f); }

.cw-log-item__val {
	font-weight: 600;
	color: var(--cw-brand-strong, #075985);
	font-variant-numeric: tabular-nums;
}

.cw-log-item__chip {
	font-size: var(--cw-text-xs, 0.75rem);
	padding: 2px 8px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-bg-subtle, #edf0e5);
	color: var(--cw-text-muted, #575d4c);
	text-transform: capitalize;
}

.cw-log-item__time {
	flex-shrink: 0;
	color: var(--cw-text-subtle, #969b86);
	font-size: var(--cw-text-xs, 0.75rem);
	white-space: nowrap;
}

.cw-log-item__del {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--cw-radius-full, 999px);
	background: transparent;
	color: var(--cw-text-subtle, #969b86);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.cw-log-item__del:hover {
	background: #fee2e2;
	color: #b91c1c;
}

.cw-log-empty {
	list-style: none;
	color: var(--cw-text-subtle, #969b86);
	font-size: var(--cw-text-sm, 0.875rem);
	padding: 0.5rem 0;
}

/* Log list "Show more" pagination */
.cw-log-more-wrap:not(:empty) { margin-top: 8px; }
.cw-log-more {
	width: 100%;
	padding: 0.5rem;
	border: 1px dashed var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-md, 12px);
	background: transparent;
	color: var(--cw-brand-strong, #075985);
	font: inherit;
	font-weight: 600;
	font-size: var(--cw-text-sm, 0.875rem);
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}
.cw-log-more:hover {
	background: var(--cw-bg-subtle, #edf0e5);
	border-color: var(--cw-brand, #0369a1);
}

/* Dashboard: Community review panel (reviewers only) ---------------------- */
.cw-dash-review {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cw-space-4, 1rem);
	background:
		radial-gradient(120% 140% at 0% 0%, var(--cw-gradient-brand-soft, #e0f2fe) 0%, transparent 60%),
		var(--cw-surface, #fff);
	border-color: var(--cw-brand-soft, #e0f2fe);
}

.cw-dash-review__body h3 { margin: 0 0 4px; }

.cw-dash-review__note {
	margin: 0;
	color: var(--cw-text-muted, #575d4c);
	font-size: var(--cw-text-sm, 0.9rem);
}

.cw-dash-review__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cw-dash-review__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-gradient-lime);
	color: var(--cw-ink, #14180f);
	font-weight: 800;
	font-size: var(--cw-text-lg, 1.125rem);
	box-shadow: var(--cw-shadow-lime);
}

/* Sidebar "Community review" nav item + count badge */
.cw-dash-nav__review {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cw-dash-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--cw-radius-full, 999px);
	background: var(--cw-brand-soft, #e0f2fe);
	color: var(--cw-brand-strong, #075985);
	font-size: var(--cw-text-xs, 0.75rem);
	font-weight: 700;
}

/* Dashboard: front-end community review queue ----------------------------- */
.cw-dash-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.cw-dash-review__head h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.cw-dash-review__admin { font-size: var(--cw-text-sm, 0.875rem); color: var(--cw-text-muted, #575d4c); text-decoration: none; white-space: nowrap; }
.cw-dash-review__admin:hover { color: var(--cw-brand-strong, #075985); }

.cw-review-queue { display: flex; flex-direction: column; gap: var(--cw-space-3, 0.75rem); margin-top: var(--cw-space-3, 0.75rem); }

.cw-review-item {
	border: 1px solid var(--cw-border, #e5e8db);
	border-radius: var(--cw-radius-lg, 16px);
	background: var(--cw-surface-2, #f7f8f3);
	padding: var(--cw-space-4, 1rem);
}
.cw-review-item__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cw-review-item__by { margin-left: auto; color: var(--cw-text-subtle, #969b86); font-size: var(--cw-text-xs, 0.75rem); }

.cw-rev-diff {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: var(--cw-radius-md, 12px);
	font-size: var(--cw-text-sm, 0.875rem);
	line-height: 1.55;
}
.cw-rev-diff span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 2px; }
.cw-rev-diff--old { background: var(--cw-bg-subtle, #edf0e5); color: var(--cw-text-muted, #575d4c); }
.cw-rev-diff--new { background: var(--cw-brand-soft, #e0f2fe); color: var(--cw-text, #14180f); }

.cw-review-item__note { margin: 8px 0 0; font-size: var(--cw-text-sm, 0.875rem); color: var(--cw-text-muted, #575d4c); }
.cw-review-item__actions { display: flex; gap: 8px; margin-top: var(--cw-space-3, 0.75rem); flex-wrap: wrap; align-items: center; }
.cw-review-item__actions .cw-btn { padding: 0.5rem 1.1rem; }
.cw-review-item__own { color: var(--cw-text-subtle, #969b86); font-size: var(--cw-text-sm, 0.875rem); }

/* Auth honeypot (must stay invisible & unfocusable) + reCAPTCHA notice ----- */
.cw-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.cw-auth__recaptcha {
	margin: var(--cw-space-3, 0.75rem) 0 0;
	font-size: var(--cw-text-xs, 0.75rem);
	color: var(--cw-text-subtle, #969b86);
	text-align: center;
}
.cw-auth__recaptcha a { color: var(--cw-text-muted, #575d4c); }

/* ─── Chat widget: drop per-message avatar + force dark palette ──────────── */
/* Sakib feedback: the left icon wastes width; light theme had contrast issues. */
.cw-chat__avatar { display: none; }
.cw-chat__row { gap: 0; }

.cw-chat-panel {
	--cw-surface: #111d30;
	--cw-surface-2: #16273c;
	--cw-bg: #0a1220;
	--cw-bg-subtle: #14293c;
	--cw-text: #e8f1f8;
	--cw-text-muted: #a6b6c9;
	--cw-text-subtle: #7d8da3;
	--cw-border: #1e3048;
	--cw-border-strong: #2b415d;
	--cw-brand: #38bdf8;
	--cw-brand-strong: #7dd3fc;
	--cw-brand-soft: #0c2740;
	--cw-gradient-brand-soft: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(14, 165, 233, 0.05) 100%);
	color: var(--cw-text, #e8f1f8);
	border-color: #1e3048;
}
/* Cards inside an answer read as dark chips */
.cw-chat-panel .cw-chat__card,
.cw-chat-panel .cw-chat__cards a { border-color: var(--cw-border-strong, #2b415d); }

/* ─── Page/navbar width parity on Elementor-built pages ─────────────────── */
/* Every CompoundWiki widget sets its own width via .cw-container (the same
   class the navbar uses). Elementor's default column padding differs per host,
   which on some sites makes the content narrower/inset than the header. Drop
   that horizontal padding wherever one of our containers lives, so the page
   lines up with the navbar on every site — independent of the Elementor kit. */
.elementor-element-populated:has(.cw-container),
.elementor-element-populated:has(.cw-detail),
.elementor-element-populated:has(.cw-dashpage) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.elementor-widget-container:has(> .cw-container),
.elementor-widget-container:has(> .cw-detail),
.elementor-widget-container:has(> .cw-calc-wrap),
.elementor-widget-container:has(> .cw-dashpage) {
	padding-left: 0;
	padding-right: 0;
}

/* Responsive card grid — force a sane column count on small screens.
   Elementor can emit a fixed grid-template-columns per element (no breakpoints)
   that wins on specificity and leaves 3 cramped columns on phones; !important
   here guarantees 1 column on mobile / 2 on small tablets everywhere. */
@media (max-width: 639px) {
	.cw-grid--cards { grid-template-columns: 1fr !important; }
}
@media (min-width: 640px) and (max-width: 979px) {
	.cw-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}