/*
 * PALETTE POINTED AT THE SHARED OE TOKENS.
 *
 * These variable NAMES are unchanged, so every rule below still works;
 * only their values now defer to the tokens the Connector prints for this
 * rail. The literals kept as fallbacks are this rail's own palette, so the
 * app is correct even on a page where the Connector has not run.
 *
 * This layer was a LIGHT theme on a dark marketing site, which is why the
 * app never matched the page around it.
 */
/**
 * BridgeBrain OE Scout — Discovery rail UI.
 * Suite theme shell, Signal Orange accent. Scoped under .bbsc-app; design
 * tokens live on :root so gates and body-level modals also resolve them.
 */

:root {
	--bbsc-accent: var(--bb-oe-accent, #0ea5b7);
	--bbsc-accent-ink: var(--bb-oe-on-accent, #03191c);
	--bbsc-accent-soft: color-mix(in srgb, var(--bb-oe-accent, #0ea5b7) 14%, transparent);
	--bbsc-canvas: var(--bb-oe-bg, #07131a);
	--bbsc-surface: var(--bb-oe-surface, #0d1f28);
	--bbsc-ink: var(--bb-oe-ink, #e6f6f9);
	--bbsc-ink-soft: var(--bb-oe-muted, #87a5ad);
	--bbsc-line: var(--bb-oe-line, rgba(56,211,227,.24));
	--bbsc-shadow: 0 10px 30px -12px rgba(37, 60, 110, 0.18);
	--bbsc-shadow-sm: 0 4px 14px -8px rgba(37, 60, 110, 0.22);
	--bbsc-radius: 24px;
	--bbsc-radius-sm: 14px;
	--bbsc-good: #16a34a;
	--bbsc-warn: #b45309;
}

.bbsc-app {
	box-sizing: border-box;
	display: block;
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px;
	color: var(--bbsc-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

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

.bbsc-app h1,
.bbsc-app h2,
.bbsc-app h3 {
	font-family: "Space Grotesk", "Inter", sans-serif;
	color: var(--bbsc-ink);
	margin: 0;
	line-height: 1.2;
}

/* ---- Layout: left rail + main ---- */
.bbsc-shell {
	display: grid;
	grid-template-columns: 286px 1fr;
	gap: 22px;
	align-items: start;
}

@media (max-width: 900px) {
	.bbsc-shell {
		grid-template-columns: 1fr;
	}
}

.bbsc-rail {
	position: sticky;
	top: 16px;
	background: var(--bbsc-surface);
	border: 1px solid var(--bbsc-line);
	border-radius: var(--bbsc-radius);
	box-shadow: var(--bbsc-shadow);
	padding: 20px;
}

.bbsc-main {
	min-width: 0;
}

/* ---- Topbar ---- */
.bbsc-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 4px 20px;
}

.bbsc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--bbsc-accent);
	color: var(--bb-oe-on-accent, #03191c);
	font-weight: 700;
	font-family: "Space Grotesk", sans-serif;
	box-shadow: var(--bbsc-shadow-sm);
}

.bbsc-topbar h1 {
	font-size: 22px;
}

.bbsc-topbar .bbsc-tagline {
	color: var(--bbsc-ink-soft);
	font-size: 13px;
	margin-top: 2px;
}

/* ---- Form controls ---- */
.bbsc-field {
	margin-bottom: 16px;
}

.bbsc-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bbsc-ink-soft);
	margin-bottom: 6px;
}

.bbsc-field .bbsc-hint {
	font-size: 12px;
	color: var(--bbsc-ink-soft);
	margin-top: 5px;
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
}

.bbsc-input,
.bbsc-select,
.bbsc-textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bbsc-line);
	border-radius: var(--bbsc-radius-sm);
	background: var(--bbsc-canvas);
	color: var(--bbsc-ink);
	font: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bbsc-textarea {
	resize: vertical;
	min-height: 66px;
}

.bbsc-input:focus,
.bbsc-select:focus,
.bbsc-textarea:focus {
	outline: none;
	border-color: var(--bbsc-accent);
	box-shadow: 0 0 0 3px var(--bbsc-accent-soft);
}

.bbsc-sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bbsc-source {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--bbsc-line);
	border-radius: var(--bbsc-radius-sm);
	background: var(--bbsc-canvas);
	cursor: pointer;
}

.bbsc-source.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bbsc-source input {
	margin-top: 3px;
}

.bbsc-source .bbsc-source-name {
	font-weight: 600;
	font-size: 14px;
}

.bbsc-source .bbsc-source-desc {
	font-size: 12px;
	color: var(--bbsc-ink-soft);
}

.bbsc-source .bbsc-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bb-oe-ink, #f5efe2) 6%, transparent);
	color: var(--bbsc-ink-soft);
	margin-top: 4px;
}

/* ---- Buttons ---- */
.bbsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--bbsc-line);
	border-radius: 999px;
	background: var(--bbsc-surface);
	color: var(--bbsc-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}

.bbsc-btn:hover {
	box-shadow: var(--bbsc-shadow-sm);
}

.bbsc-btn:active {
	transform: translateY(1px);
}

.bbsc-btn--primary {
	background: var(--bbsc-accent);
	border-color: var(--bbsc-accent);
	color: var(--bb-oe-on-accent, #03191c);
}

.bbsc-btn--primary:hover {
	background: var(--bbsc-accent-ink);
	border-color: var(--bbsc-accent-ink);
}

.bbsc-btn--block {
	width: 100%;
}

.bbsc-btn--ghost {
	background: transparent;
}

.bbsc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.bbsc-btn--sm {
	padding: 6px 12px;
	font-size: 13px;
}

/* ---- Toolbar over results ---- */
.bbsc-results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 4px 14px;
}

.bbsc-results-head h2 {
	font-size: 17px;
}

.bbsc-results-head .bbsc-sub {
	color: var(--bbsc-ink-soft);
	font-size: 13px;
}

.bbsc-mini-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- Match cards ---- */
.bbsc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.bbsc-card {
	background: var(--bbsc-surface);
	border: 1px solid var(--bbsc-line);
	border-radius: var(--bbsc-radius);
	box-shadow: var(--bbsc-shadow-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow 0.15s, border-color 0.15s, transform 0.08s;
	position: relative;
}

.bbsc-card.is-selected {
	border-color: var(--bbsc-accent);
	box-shadow: 0 0 0 2px var(--bbsc-accent-soft), var(--bbsc-shadow);
}

.bbsc-card.is-dismissed {
	opacity: 0.4;
}

.bbsc-card-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bbsc-avatar {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--bbsc-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bbsc-accent-ink);
	font-weight: 700;
	font-family: "Space Grotesk", sans-serif;
	overflow: hidden;
}

.bbsc-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bbsc-who {
	min-width: 0;
	flex: 1 1 auto;
}

.bbsc-name {
	font-weight: 700;
	font-family: "Space Grotesk", sans-serif;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bbsc-handle {
	font-size: 12px;
	color: var(--bbsc-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bbsc-source-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--bbsc-accent-soft);
	color: var(--bbsc-accent-ink);
}

/* Score ring */
.bbsc-ring {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 13px;
	font-family: "Space Grotesk", sans-serif;
	color: var(--bbsc-ink);
	background:
		radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
		conic-gradient(var(--bbsc-accent) calc(var(--bbsc-score, 0) * 1%), #eee 0);
}

.bbsc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bbsc-chip {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bb-oe-ink, #f5efe2) 6%, transparent);
	color: var(--bbsc-ink-soft);
}

.bbsc-chip--arch {
	background: var(--bbsc-accent-soft);
	color: var(--bbsc-accent-ink);
}

.bbsc-chip--timing {
	background: rgba(74,222,128,.13);
	color: var(--bbsc-good);
}

.bbsc-signal {
	font-size: 13.5px;
	color: var(--bbsc-ink);
	background: var(--bbsc-canvas);
	border-left: 3px solid var(--bbsc-accent);
	border-radius: 0 12px 12px 0;
	padding: 10px 12px;
}

.bbsc-signal .bbsc-signal-title {
	font-weight: 600;
	display: block;
	margin-bottom: 3px;
}

.bbsc-why {
	font-size: 12.5px;
}

.bbsc-why h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bbsc-ink-soft);
	margin: 0 0 5px;
}

.bbsc-why ul {
	margin: 0;
	padding-left: 16px;
	color: var(--bbsc-ink-soft);
}

.bbsc-why li {
	margin-bottom: 2px;
}

.bbsc-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}

.bbsc-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.bbsc-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--bbsc-accent);
}

.bbsc-card-links {
	display: flex;
	gap: 10px;
	align-items: center;
}

.bbsc-link {
	color: var(--bbsc-accent-ink);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
}

.bbsc-link:hover {
	text-decoration: underline;
}

.bbsc-flag {
	font-size: 11px;
	font-weight: 700;
	color: var(--bbsc-warn);
}

/* ---- Sticky action bar ---- */
.bbsc-actionbar {
	position: sticky;
	bottom: 14px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: var(--bbsc-ink);
	color: var(--bb-oe-ink, #e6f6f9);
	border-radius: 999px;
	padding: 12px 16px 12px 22px;
	box-shadow: var(--bbsc-shadow);
	flex-wrap: wrap;
}

.bbsc-actionbar .bbsc-count {
	font-weight: 700;
	font-family: "Space Grotesk", sans-serif;
}

.bbsc-actionbar .bbsc-btn {
	border-color: transparent;
}

/* ---- States ---- */
.bbsc-state {
	background: var(--bbsc-surface);
	border: 1px dashed var(--bbsc-line);
	border-radius: var(--bbsc-radius);
	padding: 40px 24px;
	text-align: center;
	color: var(--bbsc-ink-soft);
}

.bbsc-state h3 {
	margin-bottom: 6px;
	color: var(--bbsc-ink);
}

.bbsc-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--bbsc-accent-soft);
	border-top-color: var(--bbsc-accent);
	animation: bbsc-spin 0.8s linear infinite;
	margin: 0 auto 12px;
}

@keyframes bbsc-spin {
	to {
		transform: rotate(360deg);
	}
}

.bbsc-gate {
	background: var(--bbsc-surface);
	border: 1px solid var(--bbsc-line);
	border-radius: var(--bbsc-radius);
	padding: 28px;
	text-align: center;
	color: var(--bbsc-ink-soft);
}

.bbsc-source-note {
	font-size: 12px;
	color: var(--bbsc-ink-soft);
	background: var(--bbsc-accent-soft);
	border-radius: var(--bbsc-radius-sm);
	padding: 10px 12px;
	margin-top: 14px;
	line-height: 1.45;
}

.bbsc-notice {
	border-radius: var(--bbsc-radius-sm);
	padding: 10px 14px;
	margin: 0 4px 14px;
	font-size: 13.5px;
}

.bbsc-notice--warn {
	background: rgba(240,179,84,.14);
	color: var(--bbsc-warn);
	border: 1px solid #fed7aa;
}

.bbsc-notice--info {
	background: color-mix(in srgb, var(--bb-oe-accent, #d4a437) 13%, transparent);
	color: #1d4ed8;
	border: 1px solid #c7d7fe;
}

/* ---- Modal ---- */
.bbsc-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 28, 44, 0.42);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.bbsc-modal {
	background: var(--bbsc-surface);
	border-radius: var(--bbsc-radius);
	box-shadow: var(--bbsc-shadow);
	max-width: 460px;
	width: 100%;
	padding: 24px;
}

.bbsc-modal h3 {
	margin-bottom: 8px;
}

.bbsc-modal p {
	color: var(--bbsc-ink-soft);
	font-size: 13.5px;
	margin: 0 0 16px;
}

.bbsc-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.bbsc-result-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	padding: 4px 0;
	border-bottom: 1px solid var(--bbsc-line);
}

.bbsc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.bbsc-dot--created { background: var(--bbsc-good); }
.bbsc-dot--duplicate { background: var(--bbsc-warn); }
.bbsc-dot--error { background: #dc2626; }
.bbsc-dot--unavailable { background: #94a3b8; }

.bbsc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---- v0.2.0 additions ---- */

/* Ensure body-level modals carry the suite font outside .bbsc-app. */
.bbsc-modal-backdrop,
.bbsc-modal {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bbsc-modal h3 {
	font-family: "Space Grotesk", "Inter", sans-serif;
}

/* Plan-locked source rows. */
.bbsc-source.is-locked {
	opacity: 0.6;
	cursor: not-allowed;
}
.bbsc-tag--plan {
	background: rgba(242,112,95,.13);
	color: #b91c1c;
}
.bbsc-tag--csv {
	background: rgba(74,222,128,.13);
	color: var(--bbsc-good);
}

/* Already-in-Outreach flag on a card. */
.bbsc-flag--dupe {
	color: var(--bbsc-ink-soft);
	font-weight: 700;
	font-size: 11px;
	background: color-mix(in srgb, var(--bb-oe-ink, #f5efe2) 6%, transparent);
	border-radius: 999px;
	padding: 2px 9px;
}

/* Actionable empty states. */
.bbsc-state-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 14px;
}

/* Visible keyboard focus everywhere in the app + modals. */
.bbsc-app :focus-visible,
.bbsc-modal :focus-visible,
.bbsc-btn:focus-visible {
	outline: 2px solid var(--bbsc-accent);
	outline-offset: 2px;
}

/* Quota / plan notices reuse the warn/info notice styles already defined. */
.bbsc-notice--plan {
	background: rgba(242,112,95,.13);
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* ---- The board (0.13.0) ---- */
.bbsc-board { display: grid; gap: 18px; }
.bbsc-board-section h3 { margin: 0 0 4px; font-size: 1rem; }
.bbsc-board-clear { margin: 6px 0 0; color: var(--bb-oe-ok, #16a34a); }
.bbsc-board-list { display: grid; gap: 6px; margin-top: 8px; }
.bbsc-board-item { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "chip score title" "chip score meta"; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bb-oe-line, rgba(0,0,0,.12)); border-radius: 10px; color: inherit; text-decoration: none; }
.bbsc-board-item--new { border-left: 3px solid var(--bb-oe-accent, #5b8cf7); }
.bbsc-board-item--kept { border-left: 3px solid var(--bb-oe-warn, #f0b354); }
.bbsc-board-item--search { grid-template-columns: auto 1fr; grid-template-areas: "chip title" "chip meta"; }
.bbsc-board-item.is-stale .bbsc-board-meta { color: var(--bb-oe-warn, #b45309); }
.bbsc-board-item:hover .bbsc-board-title, .bbsc-board-item:focus .bbsc-board-title { text-decoration: underline; }
.bbsc-board-chip { grid-area: chip; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; align-self: start; }
.bbsc-board-score { grid-area: score; font-weight: 700; font-variant-numeric: tabular-nums; align-self: start; }
.bbsc-board-title { grid-area: title; font-weight: 600; }
.bbsc-board-meta { grid-area: meta; font-size: 12.5px; opacity: .75; }
.bbsc-board-counts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.bbsc-board-back { margin-bottom: 10px; }
.bbsc-card.is-highlighted { outline: 2px solid var(--bb-oe-accent, #5b8cf7); outline-offset: 2px; }
.bbsc-signpost p { margin: 0 0 12px; }

/* 0.15.0: the boot placeholder the script replaces; the late line appears only if it did not */
.bbsc-boot{padding:24px;opacity:.85}.bbsc-boot__late{opacity:0;animation:bbsc-boot-late 0s 4s forwards}@keyframes bbsc-boot-late{to{opacity:.8}}