/**
 * BridgeBrain LegalOps — frontend styles.
 *
 * Design direction (spec §7): clean, premium, human, organized. Off-white
 * surfaces, 1px borders, subtle accents, responsive cards. No sci-fi clutter.
 * Scoped under .bblo-wrap to avoid bleeding into the host theme.
 */

.bblo-wrap {
	--bblo-bg: #faf9f7;
	--bblo-surface: #ffffff;
	--bblo-border: #e6e3dd;
	--bblo-ink: #1f2329;
	--bblo-muted: #6b7280;
	--bblo-accent: #2e5d8a;
	--bblo-accent-ink: #ffffff;
	--bblo-ok: #2f7d4f;
	--bblo-warn: #b06a16;
	--bblo-risk: #b23b3b;
	--bblo-radius: 12px;
	--bblo-gap: 20px;

	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 4px 48px;
	color: var(--bblo-ink);
	font-size: 15px;
	line-height: 1.55;
}

.bblo-wrap * {
	box-sizing: border-box;
}

.bblo-muted {
	color: var(--bblo-muted);
}

/* Banners */
.bblo-banner {
	border: 1px solid var(--bblo-border);
	border-radius: var(--bblo-radius);
	padding: 12px 16px;
	margin-bottom: var(--bblo-gap);
	font-size: 13.5px;
	background: #f4f1ea;
	color: #4a4538;
}
.bblo-banner--info {
	border-left: 3px solid var(--bblo-accent);
}

/* Dashboard header */
.bblo-dash__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bblo-gap);
	margin-bottom: 24px;
}
.bblo-dash__title {
	font-size: 26px;
	margin: 0 0 6px;
	font-weight: 650;
}

/* Cards */
.bblo-card {
	background: var(--bblo-surface);
	border: 1px solid var(--bblo-border);
	border-radius: var(--bblo-radius);
	padding: 20px;
	margin-bottom: var(--bblo-gap);
}
.bblo-card__title {
	font-size: 17px;
	margin: 0 0 10px;
	font-weight: 620;
}
.bblo-card--centered {
	text-align: center;
	max-width: 460px;
	margin: 40px auto;
}
.bblo-card--empty {
	text-align: center;
}
.bblo-card__row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

/* Card grid */
.bblo-grid--cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bblo-gap);
	margin-bottom: var(--bblo-gap);
}
@media (min-width: 640px) {
	.bblo-grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.bblo-grid--cards { grid-template-columns: repeat(3, 1fr); }
}
.bblo-card--project { display: flex; flex-direction: column; }

/* Pills */
.bblo-pill {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--bblo-border);
	background: #f4f1ea;
	color: #4a4538;
}
.bblo-pill--status { background: #eef2f6; color: #355; border-color: #dde6ee; }
.bblo-pill--active { background: #e8f3ec; color: var(--bblo-ok); border-color: #cfe7d8; }
.bblo-pill--draft_intake { background: #f6efe2; color: var(--bblo-warn); border-color: #ece0c6; }

/* Readiness bar */
.bblo-readiness { margin: 12px 0 16px; }
.bblo-readiness__label { font-size: 12px; font-weight: 600; color: var(--bblo-muted); margin-bottom: 6px; }
.bblo-readiness__bar {
	height: 8px;
	background: #eee9e0;
	border-radius: 999px;
	overflow: hidden;
}
.bblo-readiness__fill {
	display: block;
	height: 100%;
	background: var(--bblo-accent);
	border-radius: 999px;
	transition: width .4s ease;
}
.bblo-readiness__hint { font-size: 12px; margin-top: 6px; }

/* Buttons */
.bblo-btn {
	display: inline-block;
	border: 1px solid var(--bblo-border);
	background: var(--bblo-surface);
	color: var(--bblo-ink);
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	margin-top: auto;
}
.bblo-btn:hover { background: #f4f1ea; }
.bblo-btn--primary {
	background: var(--bblo-accent);
	border-color: var(--bblo-accent);
	color: var(--bblo-accent-ink);
}
.bblo-btn--primary:hover { background: #264d72; color: #fff; }

/* Activity */
.bblo-activity__list { list-style: none; margin: 0; padding: 0; }
.bblo-activity__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bblo-border);
}
.bblo-activity__item:last-child { border-bottom: 0; }
.bblo-activity__type { font-size: 12px; font-weight: 600; color: var(--bblo-accent); text-transform: capitalize; }
.bblo-activity__msg { font-size: 14px; }
.bblo-activity__time { font-size: 11.5px; }
@media (min-width: 640px) {
	.bblo-activity__item {
		grid-template-columns: 180px 1fr 160px;
		align-items: baseline;
	}
}

/* Progressive enhancement: whole-card navigation (link inside remains the no-JS path). */
.bblo-card[data-href] {
	cursor: pointer;
}

.bblo-card[data-href]:hover {
	border-color: var(--bblo-accent);
}

.bblo-card[data-href]:focus-visible {
	outline: 2px solid var(--bblo-accent);
	outline-offset: 2px;
}

/* First-use disclaimer acceptance screen. */
.bblo-accept {
	max-width: 620px;
	margin: 0 auto;
	text-align: left;
}

.bblo-accept__text {
	margin: 12px 0 18px;
	color: var(--bblo-ink);
	line-height: 1.6;
}

.bblo-accept__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
}

.bblo-accept__check input {
	margin-top: 3px;
}

.bblo-accept__meta {
	font-size: 12px;
	margin-top: 4px;
}

/* ---- Stage 2A: forms, workspace, readiness, risks ---- */
.bblo-h1 { font-size: 1.5rem; margin: 4px 0 6px; color: var(--bblo-ink); }
.bblo-back { display: inline-block; margin-bottom: 6px; text-decoration: none; font-size: 13px; }

.bblo-field { margin: 0 0 16px; }
.bblo-field__label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--bblo-ink); }
.bblo-field__help { display: block; margin-top: 4px; font-size: 12px; color: var(--bblo-muted); }
.bblo-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bblo-gap); }

.bblo-input {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--bblo-border);
	border-radius: 8px;
	background: var(--bblo-surface);
	color: var(--bblo-ink);
	font: inherit;
	box-sizing: border-box;
}
.bblo-input:focus-visible { outline: 2px solid var(--bblo-accent); outline-offset: 1px; }

.bblo-checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.bblo-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }

.bblo-block { border: 1px solid var(--bblo-border); border-radius: var(--bblo-radius); padding: 14px 16px; margin: 0 0 16px; }
.bblo-block__title { font-weight: 700; color: var(--bblo-ink); padding: 0 6px; }
.bblo-block[disabled] { opacity: 0.7; }

/* Readiness */
.bblo-readiness-panel__head { display: flex; justify-content: space-between; align-items: baseline; }
.bblo-score { font-size: 2rem; font-weight: 700; color: var(--bblo-accent); }
.bblo-score__unit { font-size: 0.9rem; color: var(--bblo-muted); font-weight: 400; }
.bblo-gate-flag { display: inline-block; margin-top: 6px; color: var(--bblo-warn); font-weight: 600; }

/* Risks */
.bblo-risk-list, .bblo-cat-list, .bblo-missing-list { list-style: none; margin: 0; padding: 0; }
.bblo-risk { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bblo-border); align-items: flex-start; }
.bblo-risk:last-child { border-bottom: 0; }
.bblo-risk__body { flex: 1; }
.bblo-fineprint { font-size: 12px; font-style: italic; margin-top: 10px; }

.bblo-cat-list li, .bblo-missing-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bblo-border); }
.bblo-cat-list li:last-child, .bblo-missing-list li:last-child { border-bottom: 0; }
.bblo-cat__name { flex: 1; }

/* Frontend tier + counsel pills */
.bblo-tier { display: inline-block; min-width: 54px; text-align: center; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bblo-tier--0 { background: #eef1f4; color: #4b5563; }
.bblo-tier--1 { background: #e9f4ee; color: var(--bblo-ok); }
.bblo-tier--2 { background: #eef3fb; color: var(--bblo-accent); }
.bblo-tier--3 { background: #fbf0df; color: var(--bblo-warn); }
.bblo-tier--4 { background: #f7e7e7; color: var(--bblo-risk); }
.bblo-pill--counsel { background: #f7e7e7; color: var(--bblo-risk); }

/* ---- Stage 2B: documents + counsel ---- */
.bblo-subhead { font-size: 1rem; margin: 18px 0 8px; color: var(--bblo-ink); }
.bblo-btn--danger { border-color: var(--bblo-risk); color: var(--bblo-risk); }
.bblo-ok-flag { color: var(--bblo-ok); font-weight: 600; margin: 0; }

.bblo-doc-list, .bblo-review-list, .bblo-version-list, .bblo-queue { list-style: none; margin: 0; padding: 0; }
.bblo-doc-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bblo-border); flex-wrap: wrap; }
.bblo-doc-row:last-child { border-bottom: 0; }
.bblo-doc-row__title { flex: 1; font-weight: 600; text-decoration: none; color: var(--bblo-accent); min-width: 180px; }

.bblo-review-list li, .bblo-version-list li { padding: 8px 0; border-bottom: 1px solid var(--bblo-border); }
.bblo-review-list li:last-child, .bblo-version-list li:last-child { border-bottom: 0; }

.bblo-missing-note { background: #fbf0df; border: 1px solid #e6c98a; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }

/* Rendered draft body */
.bblo-doc-render { border: 1px solid var(--bblo-border); border-radius: var(--bblo-radius); padding: 18px 22px; background: var(--bblo-surface); }
.bblo-doc__banner { letter-spacing: 0.08em; color: var(--bblo-risk); font-size: 12px; margin: 0 0 8px; }
.bblo-doc__title { font-size: 1.3rem; margin: 0 0 6px; }
.bblo-doc__meta { color: var(--bblo-muted); font-size: 13px; margin: 0 0 12px; }
.bblo-doc__facts { margin: 0 0 12px; }
.bblo-doc__facts dt { font-weight: 600; margin-top: 8px; }
.bblo-doc__facts dd { margin: 2px 0 0; }
.bblo-doc__missing { color: var(--bblo-risk); font-style: italic; }
.bblo-doc__note { color: var(--bblo-muted); font-size: 13px; }
.bblo-doc__disclaimer { color: var(--bblo-muted); font-size: 12px; font-style: italic; }

/* Counsel queue */
.bblo-queue__item { padding: 14px 0; border-bottom: 1px solid var(--bblo-border); }
.bblo-queue__item:last-child { border-bottom: 0; }
.bblo-queue__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bblo-queue__title { flex: 1; font-weight: 600; text-decoration: none; color: var(--bblo-accent); min-width: 180px; }
.bblo-queue__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }