/* ---- Layout & readability ----
   Two measures, named once. --bw-measure is for prose, where line length is the
   constraint; --bw-block is for cards, tables and timelines, which need room.
   Every capped block is border-box: WordPress admin leaves box-sizing at
   content-box, so a plain max-width lands a padded card ~50px wider than an
   unpadded one beside it and the page edge goes ragged. */
.bw-lead-ai,
.bw-journey {
	--bw-measure: 820px;
	--bw-block: 900px;

	/* The chart palette, named here with the measures for the same reason: one
	   place to change, and the SVG bands and their HTML legend keys read the same
	   values so they can never drift apart. Five hues plus a grey for the
	   unranked remainder — the cap on how many channels the chart stacks. Drawn
	   from the admin's own accent colours so a stacked bar sits in the page
	   rather than on top of it, and ordered so adjacent bands differ in
	   lightness as well as hue. */
	--bw-chart-1: #2271b1;
	--bw-chart-2: #00a32a;
	--bw-chart-3: #dba617;
	--bw-chart-4: #8c4bce;
	--bw-chart-5: #d63638;
	--bw-chart-other: #c3c4c7;
}
.bw-lead-ai .bw-copy,
.bw-lead-ai > .description,
.bw-lead-ai-section > .description,
.bw-lead-ai-section > p.description {
	max-width: var(--bw-measure);
}
/* Intros that carry a revealable <details> have to be a div, not a p — a browser
   closes an open <p> the moment flow content starts. Match WP's paragraph metrics
   so they still read as one voice with the p.description blocks around them. */
.bw-lead-ai div.description {
	font-size: 13px;
	font-style: normal;
	color: #646970;
	line-height: 1.5;
	margin: 1em 0;
}
.bw-lead-ai .bw-lead-ai-section,
.bw-lead-ai .widefat,
.bw-lead-ai > h2 + p.description {
	max-width: 1000px;
}
.bw-lead-ai .form-table th {
	width: 190px;
	padding-top: 14px;
}
.bw-lead-ai .form-table td {
	padding-top: 12px;
}

/* Revealable help — a small circled glyph, detail one click away. No JS.
   `inline`, not `inline-block`: an inline-block sizes to its widest child, so
   opening it made the box as wide as the help panel and the toggle wrapped onto
   its own line, leaving the sentence above looking cut off. Inline lets the
   browser split the box — the toggle stays put and the panel renders beneath. */
.bw-help {
	display: inline;
	margin-left: 6px;
}
.bw-help > summary {
	cursor: pointer;
	list-style: none;
	display: inline-block;
	user-select: none;
	/* The glyph is only 14px on its own — too small to hit comfortably. */
	padding: 3px 5px;
	margin: -3px -5px;
	border-radius: 3px;
	line-height: 1;
}
.bw-help > summary:hover::after {
	background: #135e96;
}
.bw-help > summary:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 0;
}
.bw-help > summary::-webkit-details-marker { display: none; }
/* "?" closed, "×" open. */
.bw-help > summary::after {
	content: "?";
	display: inline-block;
	width: 14px;
	height: 14px;
	line-height: 14px;
	text-align: center;
	border-radius: 50%;
	background: #2271b1;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	vertical-align: middle;
}
.bw-help[open] > summary::after { content: "\00d7"; }
.bw-help > .bw-help-body {
	display: block;
	margin: 6px 0 2px;
	padding: 8px 12px;
	background: #f6f7f7;
	border-left: 3px solid #c3c4c7;
	border-radius: 0 3px 3px 0;
	font-size: 12px;
	line-height: 1.6;
	color: #50575e;
	max-width: 700px;
}

/* Small inline markers */
.bw-lead-ai .bw-pill {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	background: #edfaef;
	color: #00652f;
	font-size: 11px;
	font-weight: 400;
	vertical-align: middle;
}
.bw-lead-ai .bw-warn {
	color: #d63638;
}
.bw-lead-ai .bw-flag {
	display: block;
	color: #b32d2e;
	font-size: 11px;
	margin-top: 1px;
}

/* Breathing room under the tab bar. Needs the element and both wrap classes to
   outrank core's `.wrap h2.nav-tab-wrapper`, which sets margin to 0. */
.wrap.bw-lead-ai h1.nav-tab-wrapper,
.wrap.bw-lead-ai h2.nav-tab-wrapper {
	margin-bottom: 20px;
}

/* Compact toggle table (Interactions, datapoints) */
.bw-toggles th,
.bw-toggles td {
	padding: 8px 12px;
	vertical-align: middle;
}
.bw-toggles .bw-toggle-cell {
	width: 70px;
	text-align: center;
}
.bw-toggles .bw-toggle-name {
	font-weight: 600;
}
/* The checkbox sits at the far right of a wide row, so make the name toggle it too
   — otherwise the click target is a 16px box a long way from what it is labelled. */
.bw-toggles .bw-toggle-label {
	cursor: pointer;
}
.bw-toggles tbody tr:hover .bw-toggle-name {
	color: #2271b1;
}
.bw-toggles .bw-toggle-hint {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #646970;
	margin-top: 1px;
}

/* Test tab */
.bw-lead-ai .bw-lead-ai-test {
	max-width: 1100px;
}
.bw-lead-ai .bw-lead-ai-test-controls {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 4px;
}
.bw-lead-ai .bw-lead-ai-pre {
	background: #1d2327;
	color: #f0f0f1;
	padding: 12px 16px;
	border-radius: 4px;
	max-height: 360px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
}

/* Key/value tables (resolved values, summary counters, simulator) */
.bw-lead-ai-kv-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 700px;
	font-size: 13px;
}
.bw-lead-ai-kv-table td {
	padding: 5px 10px;
	border-bottom: 1px solid #e0e0e0;
	vertical-align: top;
}
.bw-lead-ai-kv-key {
	font-family: Menlo, Consolas, monospace;
	font-size: 12px;
	color: #1d2327;
	white-space: nowrap;
	width: 1%;
}
.bw-lead-ai-kv-val {
	word-break: break-word;
}
.bw-lead-ai-panel {
	margin-bottom: 16px;
}

/* Simulator result */
#bw-lead-ai-sim-result {
	margin-top: 12px;
}
#bw-lead-ai-sim-result .bw-lead-ai-kv-table {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}
#bw-lead-ai-sim-result .bw-lead-ai-kv-table td {
	padding: 6px 12px;
}
.bw-lead-ai-sim-error {
	color: #d63638;
	font-style: italic;
}

/* Test tab details/summary for visit history and raw storage */
.bw-lead-ai-test-panels details {
	margin-bottom: 12px;
}
.bw-lead-ai-test-panels summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 0;
	color: #1d2327;
}

/* UTM builder items */
.bw-lead-ai .bw-lead-ai-utm-item {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 4px 16px;
	margin-bottom: 16px;
}
.bw-lead-ai .bw-lead-ai-utm-item hr {
	display: none;
}

/* Settings tab collapsible sections */
.bw-lead-ai-section {
	margin-bottom: 4px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}
.bw-lead-ai-section > summary {
	cursor: pointer;
	padding: 8px 16px;
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
	list-style: none;
}
.bw-lead-ai-section > summary::-webkit-details-marker {
	display: none;
}
.bw-lead-ai-section > summary::before {
	content: "\25B6";
	display: inline-block;
	margin-right: 8px;
	font-size: 11px;
	transition: transform 0.15s;
}
.bw-lead-ai-section[open] > summary::before {
	transform: rotate(90deg);
}
.bw-lead-ai-section > summary h2,
.bw-lead-ai-section > summary h3 {
	display: inline;
	font-size: 14px;
	margin: 0;
	padding: 0;
}
/* What the section is set to, on the collapsed row — so the closed page still
   answers "what is turned on here?" without opening anything. */
.bw-section-status {
	float: right;
	font-size: 12px;
	color: #646970;
	font-weight: 400;
}
.bw-section-status.is-on {
	color: #00652f;
}
.bw-section-status.is-off {
	color: #8c8f94;
	font-style: italic;
}
.bw-lead-ai-section > summary {
	overflow: hidden; /* contain the floated status */
}

.bw-lead-ai-section > :not(summary) {
	padding: 0 16px;
}
/* …except two kinds of element for which padding does not produce an inset.
   A table under `border-collapse: collapse` ignores its own padding entirely, and
   a form control applies padding to the text inside it while the control itself
   stays flush. Both were sitting hard against the section border while the prose
   between them was indented 16px — that mismatch is the "weird margins". Each
   needs the inset expressed the way it actually honours. */
.bw-lead-ai-section > table {
	padding-left: 0;
	padding-right: 0;
}
/* A bordered card wants the inset outside its border, not inside it — with
   padding the frame sits on the section edge and only its contents step in. */
.bw-lead-ai-section > .bw-wizard-code {
	padding: 0;
	margin-left: 16px;
	margin-right: 16px;
}
.bw-lead-ai-section > textarea,
.bw-lead-ai-section > input,
.bw-lead-ai-section > select {
	padding-left: revert;
	padding-right: revert;
	margin-left: 16px;
	margin-right: 16px;
	width: calc(100% - 32px);
	box-sizing: border-box;
}
.bw-lead-ai-section > table > tbody > tr > *:first-child {
	padding-left: 16px;
}
.bw-lead-ai-section > table > tbody > tr > *:last-child {
	padding-right: 16px;
}
.bw-lead-ai-section .form-table {
	margin-top: 0;
}
.bw-lead-ai-section > .bw-subhead {
	margin: 22px 0 2px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #646970;
}

/* Call-to-action strip (the "start setup" prompt) */
.bw-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 4px 0 20px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
}
.bw-cta-body {
	flex: 1 1 340px;
}
.bw-cta-body strong {
	display: block;
	font-size: 14px;
}
.bw-cta-body span {
	color: #646970;
	font-size: 13px;
}

/* A block of settings that only applies while its feature is switched on.
   Hidden with display, never dropped from the page: the fields inside are still
   posted when the tab saves, and a settings tab that stopped rendering a field
   would reset it to its default on the next save. The class is server-rendered
   from the saved value and swapped live by admin-gate.js. */
.bw-lead-ai .bw-gated.is-off {
	display: none;
}

/* A milestone list, hidden while its checkbox is off. The input inside is also
   DISABLED — hiding alone would post the old percentages back and the box would
   appear to untick and do nothing. See render_milestone_row(). */
.bw-lead-ai .bw-milestone-marks.is-off {
	display: none;
}
.bw-lead-ai .bw-milestone-marks {
	margin: 4px 0 0;
}

/* ---- Setup wizard ---- */
.bw-wizard {
	max-width: 900px;
}
.bw-wizard h2 {
	font-size: 20px;
	margin: 4px 0 4px;
}
.bw-wizard h3 {
	margin: 28px 0 4px;
	font-size: 14px;
}
.bw-wizard-lede {
	font-size: 14px;
	line-height: 1.6;
	color: #50575e;
	max-width: var(--bw-measure);
	margin: 0 0 20px;
}
.bw-wizard-optional {
	font-size: 11px;
	font-weight: 400;
	color: #8c8f94;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.bw-wizard-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid #dcdcde;
}
.bw-wizard-step {
	margin: 0;
	font-size: 13px;
	color: #8c8f94;
}
.bw-wizard-num {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	background: #dcdcde;
	color: #50575e;
	font-size: 12px;
	margin-right: 4px;
}
.bw-wizard-step.is-current {
	color: #1d2327;
	font-weight: 600;
}
.bw-wizard-step.is-current .bw-wizard-num {
	background: #2271b1;
	color: #fff;
}
.bw-wizard-step.is-done {
	color: #50575e;
}
.bw-wizard-step.is-done .bw-wizard-num {
	background: #00652f;
	color: #fff;
}

/* A step already seen is a way back to it. Button on the steps that have a form
   to carry their answers, link on the last one, styled the same either way. */
.bw-wizard-step-link {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.bw-wizard-step-link:hover,
.bw-wizard-step-link:focus {
	color: #2271b1;
	text-decoration: underline;
}
.bw-wizard-step-link:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	text-decoration: none;
}

/* Only here to be the form's default button, so Enter in a text field still goes
   forward rather than back to whichever step the strip lists first. */
.bw-wizard-default-submit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bw-wizard-input {
	max-width: 560px;
	font-size: 15px;
	padding: 8px 10px;
}
.bw-wizard-actions {
	margin: 28px 0 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bw-wizard-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	cursor: pointer;
}
.bw-wizard-choice:hover {
	border-color: #2271b1;
}
.bw-wizard-choice:has(input:checked) {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}
.bw-wizard-choice input {
	margin-top: 3px;
}
.bw-wizard-choice-body strong {
	font-size: 14px;
}
.bw-wizard-choice-sub,
.bw-wizard-choice-note {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.6;
	color: #646970;
}
.bw-wizard-choice-note {
	color: #8a5700;
	background: #fcf9f2;
	border-left: 3px solid #dba617;
	padding: 7px 12px;
	border-radius: 0 3px 3px 0;
}

.bw-wizard-hint {
	background: #f6f7f7;
	border-left: 3px solid #c3c4c7;
	border-radius: 0 3px 3px 0;
	padding: 10px 14px;
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.7;
	color: #50575e;
}
.bw-wizard-map th,
.bw-wizard-map td {
	padding: 8px 12px;
	vertical-align: middle;
}
.bw-wizard-map td:first-child {
	width: 240px;
}
.bw-wizard-map label {
	font-weight: 600;
}

.bw-wizard-code {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: hidden;
	background: #1d2327;
	margin-bottom: 8px;
}
.bw-wizard-code-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
	font-size: 12px;
	color: #50575e;
}
.bw-wizard-code textarea.bw-lead-ai-pre {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
	resize: vertical;
	max-height: none;
}
/* WP admin resets list markers to none, so these read as loose paragraphs. */
.bw-wizard-explain {
	max-width: var(--bw-measure);
	font-size: 13px;
	line-height: 1.7;
	color: #50575e;
	margin-left: 18px;
	padding-left: 8px;
	list-style: disc outside;
}
ol.bw-wizard-explain {
	list-style: decimal outside;
}
.bw-wizard-explain li {
	margin-bottom: 4px;
}

/* Simulated test links (Test tab) */
.bw-lead-ai-simlinks-origin {
	background: #f0f0f1;
	padding: 4px 6px;
	border-radius: 3px;
}
.bw-lead-ai-simlinks-group {
	margin: 20px 0 6px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #50575e;
}
.bw-lead-ai-simlinks-table {
	margin-bottom: 8px;
}
.bw-lead-ai-simlinks-table td {
	vertical-align: top;
	padding: 10px;
}
.bw-lead-ai-simlinks-table th {
	padding: 8px 10px;
}
.bw-lead-ai-simlinks-url {
	display: inline-block;
	font-size: 11px;
	line-height: 1.5;
	word-break: break-all;
	background: #f6f7f7;
	padding: 4px 6px;
	border-radius: 3px;
}
.bw-lead-ai-simlinks-sm {
	font-size: 11px;
	color: #646970;
}
/* Journey list: WP floats .subsubsub left and the search box follows inline, so the
   two collide with no gap at all once the status labels carry counts. */
.bw-lead-ai .subsubsub {
	margin-right: 16px;
}
.bw-lead-ai .search-box {
	float: none;
	display: inline-block;
	vertical-align: middle;
}

/* ---- Visitor journey report ---- */
.bw-journey-back {
	margin: 8px 0 4px;
}
/* The divider is shared with the settings tabs, which run to the wider column. */
.bw-lead-ai:not(.bw-journey) > .bw-journey-divider {
	max-width: 1000px;
}
.bw-journey-hero,
.bw-journey .bw-journey-touchpoints,
.bw-journey-stats,
.bw-journey-timeline,
.bw-journey-divider,
.bw-journey .bw-lead-ai-section,
.bw-journey .widefat,
.bw-journey-pre,
.bw-journey .bw-journey-note {
	box-sizing: border-box;
	max-width: var(--bw-block);
}

.bw-journey-hero {
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
	padding: 18px 22px;
	margin: 8px 0 28px;
}
.bw-journey-eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #646970;
	margin-bottom: 2px;
}
.bw-journey-hero h1 {
	margin: 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.2;
}
.bw-journey-contact {
	margin: 4px 0 0;
	font-size: 14px;
	color: #2c3338;
}
.bw-journey-meta {
	margin: 6px 0 0;
	color: #50575e;
	font-size: 13px;
}
.bw-journey-badge {
	display: inline-block;
	margin: 12px 0 0;
	padding: 3px 10px;
	border-radius: 12px;
	background: #edfaef;
	color: #00652f;
	font-size: 12px;
}
.bw-journey-badge--pending {
	background: #fcf3e6;
	color: #8a5700;
}

.bw-journey .bw-journey-touchpoints {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.bw-journey-card {
	flex: 1 1 260px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 14px 18px;
}
.bw-journey-card h3 {
	margin: 0 0 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #646970;
}
.bw-journey-channel {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.bw-journey-sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: #646970;
}
.bw-journey-note {
	margin-top: 8px;
}

.bw-journey-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 8px;
}
.bw-journey-stat {
	flex: 1 1 130px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 14px 16px;
	text-align: center;
}
.bw-journey-stat-n {
	display: block;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}
.bw-journey-stat-l {
	display: block;
	font-size: 12px;
	color: #646970;
	margin-top: 2px;
}

.bw-journey-timeline {
	border-left: 2px solid #dcdcde;
	margin: 12px 0 0;
	padding-left: 22px;
}
.bw-journey-visit {
	position: relative;
	margin-bottom: 26px;
}
.bw-journey-visit::before {
	content: "";
	position: absolute;
	left: -27px;
	top: 5px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #2271b1;
	border: 2px solid #fff;
}
.bw-journey-visit-head {
	margin: 0;
	font-size: 14px;
}
.bw-journey-items {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.bw-journey-item {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 3px 0;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f1;
}
.bw-journey-item:last-child {
	border-bottom: 0;
}
.bw-journey-time {
	flex: 0 0 42px;
	color: #8c8f94;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.bw-journey-item--submit {
	background: #f6fbf7;
}
/* The moment they converted — the row on this timeline the reader came for. */
.bw-journey-item--conversion {
	background: #edfaef;
}
.bw-journey-item--conversion strong {
	color: #007017;
}
.bw-journey-item--event strong {
	color: #2271b1;
}
.bw-journey-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 10px;
	background: #f0f0f1;
	color: #50575e;
	font-size: 11px;
}
.bw-journey .bw-lead-ai-section {
}
.bw-journey-divider {
	margin: 28px 0 10px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #646970;
	border-top: 1px solid #dcdcde;
	padding-top: 14px;
}
.bw-journey .widefat {
}
.bw-journey-key {
	width: 220px;
}
.bw-journey-pre {
	font-family: monospace;
	font-size: 12px;
	line-height: 1.6;
	background: #f6f7f7;
	padding: 12px 14px;
	border-radius: 3px;
	overflow-x: auto;
}

.bw-lead-ai-simlinks-actions {
	white-space: nowrap;
}

.bw-wizard-select {
	font-size: 14px;
	padding: 4px 8px;
	margin-bottom: 4px;
}
.bw-wizard h3 {
	margin-top: 30px;
}
.bw-wizard-choice input[type="checkbox"] {
	margin-top: 4px;
}

/* ---- Reports page ----
   Data display rather than a settings form, so it takes the journey report's
   --bw-block measure for its cards and tables and --bw-measure for prose,
   inherited via .bw-copy. */
.bw-report-block {
	box-sizing: border-box;
	max-width: var(--bw-block);
	margin-top: 34px;
}
.bw-report-block > h2 {
	margin-top: 0;
}
/* .subsubsub floats, so without this the KPI strip rides up beside the range
   links instead of starting beneath them. */
.bw-report-ranges {
	overflow: hidden;
	margin-bottom: 4px;
}
/* The attribution switcher reuses the range-pill control; its leading label is
   plain text naming what the pills change, and must not read as a filter. */
.bw-lead-ai .bw-report-attribution .subsubsub {
	margin-top: 2px;
}
.bw-lead-ai .bw-report-attribution-label {
	color: #50575e;
	margin-right: 6px;
}

/* KPI strip — reuses .bw-journey-stat, with the two things a KPI card needs
   that a journey stat does not. */
/* Two classes deliberately: it has to beat .bw-journey-stat-n's 26px on the same
   element, and winning that on source order alone would break the first time
   this file is reordered. */
.bw-journey-stat-n.bw-report-kpi-text {
	font-size: 17px;
	line-height: 1.3;
	/* A channel name is a stranger's string and can be arbitrarily long; let it
	   wrap inside the card rather than stretch it past its neighbours. */
	overflow-wrap: anywhere;
}
.bw-report-delta {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.bw-report-delta.is-up {
	color: #00652f;
}
.bw-report-delta.is-down {
	color: #b32d2e;
}
.bw-report-delta.is-flat {
	color: #8c8f94;
}
.bw-report-note {
	margin-top: 6px;
}

/* Prose between a heading and its table */
.bw-lead-ai .bw-report-lede {
	max-width: var(--bw-measure);
	margin: 10px 0;
	font-size: 13px;
	line-height: 1.6;
	color: #50575e;
}
.bw-report-detail {
	display: block;
	margin-top: 2px;
	max-width: 620px;
	font-size: 12px;
	line-height: 1.5;
	color: #646970;
}
.bw-report-gaps {
	max-width: var(--bw-measure);
	margin: 4px 0 0 18px;
	padding-left: 8px;
	font-size: 13px;
	color: #50575e;
	list-style: disc outside;
}
/* Beats core's `.widefat th { text-align: left }` — a column of figures only
   compares if the digits line up. */
.bw-lead-ai .widefat .bw-report-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The channel table stripes itself (class on every other visible row) instead
   of using core's .striped, because its collapsed subrows are real <tr>s and
   :nth-child would count them — the zebra falls out of step with what shows. */
.bw-lead-ai .widefat tr.bw-report-alt {
	background-color: #f6f7f7;
}

/* Row expander: a real button, so it is keyboard-reachable and announces its
   state via aria-expanded. Sized like core's small toggles. */
.bw-lead-ai .bw-report-expand {
	box-sizing: border-box;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	padding: 0;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	background: #fff;
	color: #2271b1;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.bw-lead-ai .bw-report-expand:hover,
.bw-lead-ai .bw-report-expand:focus {
	border-color: #2271b1;
	background: #f0f6fc;
}
/* Rows with nothing to expand reserve the button's footprint, so every channel
   name in the column starts at the same x. */
.bw-lead-ai .bw-report-expand-gap {
	display: inline-block;
	width: 28px;
	height: 1px;
	vertical-align: middle;
}

/* Breakdown subrows: visually subordinate to the channel row above — smaller,
   greyer, indented past the expander — and on their own tint (not the stripe
   grey) so an open group reads as one unit however the zebra fell. */
.bw-lead-ai .widefat tr.bw-report-sub {
	background-color: #f0f0f1;
}
.bw-lead-ai .widefat tr.bw-report-sub td {
	font-size: 12px;
	color: #50575e;
	padding-top: 4px;
	padding-bottom: 4px;
	border-top: none;
}
.bw-lead-ai .widefat tr.bw-report-sub .bw-report-sub-label {
	padding-left: 40px;
}
.bw-report-sub-arrow {
	color: #8c8f94;
}

/* ---- Weekly chart (hand-drawn SVG, no library) ---- */
.bw-chart-wrap {
	box-sizing: border-box;
	max-width: var(--bw-block);
	margin-top: 12px;
	padding: 12px 14px 6px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}
/* viewBox + width:100% + height:auto is what makes the chart responsive: the
   SVG keeps its own coordinate system and the browser scales the whole thing. */
.bw-chart {
	display: block;
	width: 100%;
	height: auto;
}
.bw-chart-grid {
	stroke: #e8e8e9;
	stroke-width: 1;
}
.bw-chart-base {
	stroke: #c3c4c7;
	stroke-width: 1;
}
.bw-chart-axis {
	fill: #8c8f94;
	font-size: 10px;
}
/* Stacked bands share edges; without this the seams antialias into visible
   light lines and a solid bar looks striped. */
.bw-chart-band {
	shape-rendering: crispEdges;
	fill: currentColor;
}
/* The palette is assigned once per slot as `color`, and both consumers read it
   from there — the SVG band as its fill, the legend key as its background. One
   assignment, so a band and its key cannot end up different colours. */
.bw-chart-c1 { color: var(--bw-chart-1); }
.bw-chart-c2 { color: var(--bw-chart-2); }
.bw-chart-c3 { color: var(--bw-chart-3); }
.bw-chart-c4 { color: var(--bw-chart-4); }
.bw-chart-c5 { color: var(--bw-chart-5); }
.bw-chart-other { color: var(--bw-chart-other); }

.bw-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	max-width: var(--bw-block);
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #50575e;
}
.bw-chart-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.bw-chart-key {
	display: block;
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: currentColor;
}

/* A collapsible section that is ALSO a report block shares the report measure.
   It carries both classes, and the generic `.bw-lead-ai .bw-lead-ai-section`
   1000px cap out-specifies the bare block cap — leaving the AI Analysis panel
   as the one ragged edge on an otherwise aligned page. */
.bw-lead-ai .bw-lead-ai-section.bw-report-block {
	max-width: var(--bw-block);
	box-sizing: border-box;
}

/* ── Row editors for the `label : value, value` settings ──────────────────────
   One component, five settings. The table is deliberately borderless and tight:
   twenty-four channel rules read as a list, not as twenty-four cards. */
.bw-rows {
	margin: 8px 0 0;
}
.bw-rows-table {
	width: 100%;
	border-collapse: collapse;
}
.bw-rows-table th {
	padding: 0 8px 4px 0;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #646970;
}
.bw-rows-table td {
	padding: 0 8px 4px 0;
	vertical-align: top;
}
.bw-rows-table th:last-child,
.bw-rows-table td:last-child {
	padding-right: 0;
}
.bw-rows-table .bw-row-key {
	width: 26%;
}
.bw-rows-table .bw-row-act {
	width: 1%;
	white-space: nowrap;
}
.bw-rows-table input[type="text"] {
	width: 100%;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
}
/* A pinned row still reads as a value, not as a disabled control — it is not
   greyed out, because its content is live and does get saved. */
.bw-rows-table tr[data-bw-locked] input[type="text"][readonly] {
	background: #f6f7f7;
	color: #2c3338;
}
.bw-rows .bw-row-btn {
	min-width: 28px;
	padding: 0 6px;
	line-height: 26px;
	text-align: center;
}
.bw-rows .bw-row-locked {
	display: inline-block;
	min-width: 28px;
	text-align: center;
	color: #c3c4c7;
}
.bw-rows-add {
	margin: 8px 0 0;
}
.bw-rows-switch {
	margin: 6px 0 0;
	font-size: 12px;
}
.bw-rows [hidden] {
	display: none;
}

/* ---- Reports: the tab strip ---- */
/* wp-admin's nav-tab strip, exactly as the settings page uses it, because these
   are four screens rather than four readings of one table. That is the whole
   distinction between the two controls on this plugin: a nav-tab changes what
   you are looking at, a `subsubsub` pill changes how the thing in front of you
   is counted. Core supplies the tab styling; all that is needed here is the
   same breathing room the settings strip gets. */
.wrap.bw-lead-ai h2.nav-tab-wrapper.bw-report-tabs {
	margin-bottom: 16px;
}

/* ---- Data Quality tab ---- */
/* Group headings inside the one block. They are subordinate to the block's own
   heading, so they must not arrive with an <h2>'s full top margin and read as a
   new section of the page. */
.bw-lead-ai .bw-quality-subhead {
	margin: 28px 0 0;
	font-size: 15px;
}
/* The three columns: what was checked, what it found, what you can do. The
   action column is sized to its button so the figures do not drift right. */
.bw-lead-ai .bw-quality-table td:last-child,
.bw-lead-ai .bw-quality-table th:last-child {
	width: 110px;
}
.bw-lead-ai .bw-quality-act {
	margin: 0;
}
/* A dismissed row is present, readable and visibly stood down. Faded rather
   than hidden: a warning that vanished would be indistinguishable from one that
   was fixed. */
.bw-lead-ai .bw-quality-row.is-dismissed td {
	color: #787c82;
}
.bw-lead-ai .bw-quality-row.is-lapsed strong {
	color: #b32d2e;
}
/* What the check looks for, shown on every row whatever it found — the sentence
   that lets an empty result mean something. Set back from the finding above it
   so the two do not read as one paragraph. */
.bw-lead-ai .bw-quality-watches {
	margin-top: 6px;
	color: #787c82;
}
.bw-lead-ai .bw-quality-none {
	color: #a7aaad;
}

/* ---- Form Field Mapping ---- */
/* One line per data point. `form-table` gives each field its own tall row and a
   wide label column, which is right for six fields and unreadable for
   twenty-five: what a reader needs here is to scan a column of names, not to
   read a paragraph under each. */
.bw-lead-ai .bw-target-table {
	max-width: 1000px;
	border-left: 0;
	border-right: 0;
}
.bw-lead-ai .bw-target-table td,
.bw-lead-ai .bw-target-table th {
	vertical-align: middle;
}
.bw-lead-ai .bw-target-what {
	width: 24%;
}
.bw-lead-ai .bw-target-tag {
	width: 24%;
}
.bw-lead-ai .bw-target-attr {
	width: 20%;
}
.bw-lead-ai .bw-target-table .bw-target-input {
	width: 100%;
	max-width: 320px;
}
/* A tag with no merge tag is not a gap in the table — say so quietly rather than
   leaving a blank cell that reads as missing data. */
.bw-lead-ai .bw-target-notag {
	color: #8c8f94;
	font-style: italic;
	font-size: 12px;
}
/* The rows that are actually doing something, findable at a glance among the
   twenty that are not. */
.bw-lead-ai .bw-target-table tr.bw-target-set > td:first-child {
	box-shadow: inset 3px 0 0 #2271b1;
}

/* ---- Other Settings: export / import / factory reset ---- */
.bw-lead-ai .bw-portability-rule {
	max-width: var(--bw-block);
	margin: 32px 0 8px;
	border: 0;
	border-top: 1px solid #dcdcde;
}
/* The preview is a notice rather than a page section on purpose: it is a
   decision waiting on the reader, and it should read as one. */
.bw-lead-ai .bw-import-preview {
	max-width: var(--bw-block);
	padding: 4px 14px 12px;
}
.bw-lead-ai .bw-import-preview > h2 {
	margin: 10px 0 4px;
	font-size: 15px;
}
.bw-lead-ai .bw-import-diff {
	margin: 8px 0;
}
.bw-lead-ai .bw-import-actions {
	margin-top: 12px;
}
/* Lines leaving and lines arriving. Coloured AND signed: the sign is what
   survives a monochrome print and a colour-blind reader, the colour is what
   makes the list scannable for everyone else. */
.bw-lead-ai .bw-import-lines {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	list-style: none;
}
.bw-lead-ai .bw-import-lines code {
	font-size: 11px;
	padding: 1px 4px;
}
.bw-lead-ai .bw-import-lines .is-gone {
	color: #b32d2e;
}
.bw-lead-ai .bw-import-lines .is-added {
	color: #00652f;
}
.bw-lead-ai .bw-import-lines .is-more {
	color: #787c82;
	font-style: italic;
}