/*
 * The report a stranger reads about themselves.
 *
 * Full width, like the production dashboard, and sharing its vocabulary: the
 * two are the same product at different moments, and a reader who claims a
 * report should recognise where they have landed.
 */

/*
 * CRE8TIVEFORCE PALETTE.
 *
 * The report lands on the site that invited them, so it has to look like it
 * belongs there. A generic dark-blue product page arriving under a theatrical
 * one-sheet reads as a third-party tool bolted on — which undercuts the thing
 * the report is trying to establish, that somebody took their business
 * seriously.
 *
 * Premiere Black, Velvet, Marquee Ivory and Champagne Gold, from the theme.
 * Carpet Red is reserved for genuine attention rather than used as an accent;
 * on a page making claims about somebody's company, red everywhere reads as
 * alarm.
 *
 * Every value is a variable so a partner brand can override the set without
 * touching a rule.
 */
.bbodr {
	/*
	 * THE CONTROL ROOM PALETTE, TAKEN FROM THE THEME'S OWN TOKENS.
	 *
	 * Re-skinned from the old brown and champagne set when cre8tiveforce moved
	 * to blacks, navy, cyan and silver. Every value is `var(--cf-*, fallback)`:
	 * the theme's variable first, so a future retune of the site retunes the
	 * report with it, and a literal behind it so the report still renders
	 * correctly if it is ever placed somewhere the theme is not loaded.
	 *
	 * Colours are borrowed, never redefined. Quietly inventing a shade to fix
	 * a layout problem is how a plugin ends up looking almost but not quite
	 * like the site it lives on.
	 */
	--bbodr-bg: var(--cf-black, #05070A);
	--bbodr-card: var(--cf-panel, #10161E);
	--bbodr-card-2: var(--cf-panel-2, #141C26);
	--bbodr-line: var(--cf-line-strong, rgba(200, 216, 235, .24));
	--bbodr-line-soft: var(--cf-line, rgba(200, 216, 235, .13));
	--bbodr-text: var(--cf-white, #F5F7FA);
	--bbodr-sub: var(--cf-silver, #B7C0CC);

	/*
	 * CYAN IS THE ACCENT, not blue. On this palette cyan is what the theme
	 * uses to say "live instrument" - it carries the glow - and blue reads as
	 * a link. The report is instruments.
	 */
	--bbodr-accent: var(--cf-cyan, #74E6FF);
	--bbodr-alert: var(--cf-red, #FF6B75);

	/*
	 * A SOFTER TONE FOR INLINE ERROR TEXT, kept distinct on purpose.
	 *
	 * The old palette used a separate, quieter rose here and I collapsed it
	 * into the alarm colour during the re-skin. That was wrong: the alarm
	 * colour marks a finding that asks for a decision about the company, and a
	 * form saying "that did not save" is not that. Reusing one colour for both
	 * teaches a reader that the alarm means nothing in particular.
	 */
	--bbodr-alert-soft: color-mix(in srgb, var(--cf-red, #FF6B75) 72%, var(--cf-white, #F5F7FA));
	--bbodr-caution: var(--cf-amber, #F3C96B);
	--bbodr-ok: var(--cf-green, #5FE0B1);
	--bbodr-paper: var(--cf-white, #F5F7FA);

	/*
	 * FULL BLEED, BECAUSE IT NEVER WAS.
	 *
	 * This renders through a shortcode, so it lives inside the theme's content
	 * column. `width: 100%` cannot escape a parent with a max-width, so the
	 * dashboard was being drawn in a column about 600px wide - which is why the
	 * findings grid, which has always been a grid, only ever produced one
	 * column, and why the whole page read as a vertical scroll of sprawl.
	 *
	 * This breaks out to the viewport. 100vw includes the scrollbar on some
	 * desktop browsers, hence the overflow guard on the wrapper below rather
	 * than a horizontal scrollbar appearing on every report.
	 */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	box-sizing: border-box;
	background: var(--bbodr-bg);
	color: var(--bbodr-text);
	overflow-x: hidden;

	/*
	 * ONE SANS FACE, AND NO WEBFONT DEPENDENCY.
	 *
	 * The display line used to be 'Bodoni Moda', Georgia, serif - "the theme's
	 * faces where they are loaded", an assumption nobody checked. Where Bodoni
	 * is not loaded the headline renders in Georgia, and a Didone fallback at
	 * heading size is the single most dated thing a page can do.
	 *
	 * Hierarchy now comes from size, weight and tracking rather than from a
	 * second family, so it looks the same everywhere and depends on nothing
	 * arriving over the network.
	 */
	font-family: var(--cf-body, Inter), Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ *
 * SHELL
 *
 * Full bleed is for the background. The content still needs a measure, or a
 * sentence runs the whole width of a 27 inch monitor and the instruments sit
 * alone in a strip at the top left - which is what full bleed alone produced.
 * ------------------------------------------------------------------ */

.bbodr-shell {
	/*
	 * The theme's own wrap, so the report lines up with everything above and
	 * below it on the page instead of being a slightly different width.
	 */
	max-width: var(--cf-wrap, min(1480px, calc(100vw - 72px)));
	margin: 0 auto;
}

.bbodr-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-bottom: .9rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--bbodr-line-soft);
}

.bbodr-eyebrow {
	margin: 0;
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .72rem;
	color: var(--bbodr-accent);
}

.bbodr-masthead .bbodr-asof { margin: 0; font-size: .8rem; color: var(--bbodr-sub); }

/* ------------------------------------------------------------------ *
 * THE FOLD: verdict on the left, instruments on the right.
 *
 * Both halves are load bearing. The verdict alone was a narrow column of prose
 * with the whole right side empty. minmax(0,·) on both tracks because a long
 * unbroken headline in a grid child will otherwise push the track wider than
 * its share and shove the instruments off screen.
 * ------------------------------------------------------------------ */

.bbodr-fold {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bbodr-verdict { min-width: 0; }

.bbodr-title {
	font-family: inherit;
	font-weight: 800;
	letter-spacing: -.03em;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.05;
	margin: 0 0 .75rem;
	text-wrap: balance;
}

.bbodr-summary {
	color: var(--bbodr-text);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	max-width: 60ch;
	opacity: .92;
}

.bbodr-basis {
	margin: 1.1rem 0 0;
	padding-left: .9rem;
	border-left: 2px solid var(--bbodr-accent);
	font-size: .88rem;
	color: var(--bbodr-sub);
	max-width: 60ch;
}

/* ------------------------------------------------------------------ *
 * INSTRUMENTS
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * THE FOLD
 *
 * The big type is the CONCLUSION. The old hero set "What we could see from
 * outside" at 3.4rem - a section heading about our method, in the largest type
 * on the page, above the only sentence that mattered.
 * ------------------------------------------------------------------ */

.bbodr-kicker {
	margin: 0 0 .5rem;
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, monospace;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .68rem;
	color: var(--bbodr-accent);
}

.bbodr-counts {
	margin: 1.1rem 0 0;
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--bbodr-sub);
}

/* ------------------------------------------------------------------ *
 * THE STATUS MATRIX
 *
 * Nine cells, always full, in place of a single ring. A dial at 62% is one
 * number with a wedge missing, and on a dark panel a half-filled circle reads
 * as a broken widget rather than a measurement - which is how it was described.
 * It also said nothing actionable: 62% of what?
 *
 * These are the nine rails, in the order the board repeats below, so the fold
 * previews the page instead of decorating it.
 * ------------------------------------------------------------------ */

.bbodr-matrix {
	padding: clamp(.9rem, 2vw, 1.25rem);
	border: 1px solid var(--bbodr-line);
	border-radius: 16px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(116, 230, 255, .10), transparent 60%),
		var(--bbodr-card);
}

.bbodr-matrix-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bbodr-line-soft);
	border: 1px solid var(--bbodr-line-soft);
	border-radius: 10px;
	overflow: hidden;
	counter-reset: none;
}

.bbodr-cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .5rem;
	min-height: 5.5rem;
	padding: .7rem .75rem;
	background: var(--bbodr-card-2);
	border-left: 3px solid transparent;
}

.bbodr-cell-name {
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bbodr-text);
}

.bbodr-cell-state {
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, monospace;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .58rem;
	color: var(--bbodr-sub);
}

/*
 * Tinted whole, not dotted. The point is that nine cells read as a wall of
 * status from across a desk; a small mark in a corner is something to hunt for.
 */
.bbodr-cell.is-attention {
	background: color-mix(in srgb, var(--bbodr-alert) 18%, var(--bbodr-card-2));
	border-left-color: var(--bbodr-alert);
}

.bbodr-cell.is-attention .bbodr-cell-state { color: var(--bbodr-alert); }

.bbodr-cell.is-handled {
	background: color-mix(in srgb, var(--bbodr-ok) 12%, var(--bbodr-card-2));
	border-left-color: var(--bbodr-ok);
}

.bbodr-cell.is-handled .bbodr-cell-state { color: var(--bbodr-ok); }
.bbodr-cell.is-unseen { border-left-color: var(--bbodr-line); }
.bbodr-cell.is-na { opacity: .5; }

.bbodr-matrix-key {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	margin: .75rem 0 0;
	font-size: .72rem;
	color: var(--bbodr-sub);
}

.bbodr-matrix-key span { display: inline-flex; align-items: center; gap: .35rem; }

.bbodr-key-dot { width: .55rem; height: .55rem; border-radius: 3px; display: inline-block; flex: none; }
.bbodr-key-dot.is-attention { background: var(--bbodr-alert); }
.bbodr-key-dot.is-handled   { background: var(--bbodr-ok); }
.bbodr-key-dot.is-unseen    { background: var(--bbodr-line); }

@media (max-width: 30rem) {
	.bbodr-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * BODY: evidence in the main column, reference in the rail.
 * ------------------------------------------------------------------ */

.bbodr-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}

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

.bbodr-mainhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-bottom: 1rem;
}

.bbodr-h2 {
	font-family: inherit;
	font-weight: 700;
	letter-spacing: -.015em;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	margin: 0;
}

.bbodr-filters { display: flex; flex-wrap: wrap; gap: .4rem; }

.bbodr-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	border: 1px solid var(--bbodr-line);
	background: transparent;
	color: var(--bbodr-sub);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
}

.bbodr-chip span { font-variant-numeric: tabular-nums; opacity: .65; }
.bbodr-chip:hover { border-color: var(--bbodr-accent); color: var(--bbodr-text); }

.bbodr-chip.is-on {
	background: rgba(116, 230, 255, .14);
	border-color: var(--bbodr-accent);
	color: var(--bbodr-text);
}

/* ------------------------------------------------------------------ *
 * RAIL WIDGETS
 *
 * <details> rather than a scripted accordion: it opens and closes with no
 * JavaScript, is keyboard operable and announced correctly for free, and
 * prints open.
 * ------------------------------------------------------------------ */

.bbodr-rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; position: sticky; top: 1rem; }

.bbodr-widget {
	border: 1px solid var(--bbodr-line);
	border-radius: 14px;
	background: var(--bbodr-card);
	overflow: hidden;
}

.bbodr-widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .8rem 1rem;
	cursor: pointer;
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .74rem;
	color: var(--bbodr-text);
	list-style: none;
}

.bbodr-widget-head::-webkit-details-marker { display: none; }

.bbodr-widget-head::after {
	content: '';
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var(--bbodr-accent);
	border-bottom: 2px solid var(--bbodr-accent);
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
}

.bbodr-widget[open] .bbodr-widget-head::after { transform: rotate(-135deg); }
.bbodr-widget-body { padding: 0 1rem 1rem; border-top: 1px solid var(--bbodr-line-soft); }

/* The rail's panels are already titled by the widget they sit in. */
.bbodr-widget-body .bbodr-h2,
.bbodr-widget-body > section > h2 { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bbodr-widget-head::after { transition: none; }
}

/* ------------------------------------------------------------------ *
 * NARROW
 *
 * One column, and the rail moves below the evidence rather than above it -
 * on a phone, reference before findings is the document order all over again.
 * ------------------------------------------------------------------ */

@media (max-width: 60rem) {
	.bbodr-fold,
	.bbodr-body { grid-template-columns: minmax(0, 1fr); }

	.bbodr-rail { position: static; }
}

/*
 * A draft must not read like a finished report. Loud on purpose: the failure
 * this prevents is somebody reviewing a draft, being satisfied, and not
 * realising they still have to approve it.
 */
.bbodr-draft {
	margin: 0 0 1.5rem;
	padding: .8rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(243, 201, 107, .5);
	background: rgba(255, 176, 46, .12);
	color: var(--bbodr-caution);
	font-weight: 600;
}

.bbodr-head { max-width: 62ch; margin-bottom: 1.5rem; }
.bbodr-title { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
.bbodr-summary { color: var(--bbodr-sub); }

/* What the report rests on, stated before anything it asserts. */
.bbodr-coverage {
	max-width: 62ch;
	margin: 0 0 2rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--bbodr-accent);
	border-radius: 0 10px 10px 0;
	background: rgba(116, 230, 255, .08);
}

.bbodr-coverage p { margin: 0; font-size: .95rem; }

.bbodr-pill {
	padding: .15rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--bbodr-line);
	background: rgba(255, 255, 255, .04);
	font-size: .7rem;
	letter-spacing: .03em;
	color: var(--bbodr-sub);
	white-space: nowrap;
}

.bbodr-pill--opportunity { border-color: rgba(116, 230, 255, .55); color: var(--bbodr-accent); }
.bbodr-pill--gap { border-color: rgba(243, 201, 107, .5); color: var(--bbodr-caution); }
.bbodr-pill--risk { border-color: rgba(255, 107, 117, .55); color: var(--bbodr-alert); }

.bbodr-pill--conf-low { border-style: dashed; }

/* Their correction, beneath what we said rather than instead of it. */
.bbodr-correction {
	display: block;
	margin: 0 0 .8rem;
	padding: .7rem .9rem;
	border-radius: 10px;
	border: 1px solid rgba(116, 230, 255, .45);
	background: rgba(116, 230, 255, .1);
	font-size: .92rem;
}

.bbodr-correction strong { display: block; margin-bottom: .2rem; color: var(--bbodr-accent); }

.bbodr-evidence { margin-top: .5rem; font-size: .92rem; }
.bbodr-evidence summary { cursor: pointer; color: var(--bbodr-sub); }
.bbodr-evidence ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.bbodr-evidence li { margin-bottom: .5rem; }
.bbodr-evidence a { color: var(--bbodr-accent); }

.bbodr-quote { display: block; margin-top: .2rem; color: var(--bbodr-sub); font-style: italic; }

.bbodr-noevidence { margin: .5rem 0 0; font-size: .9rem; color: var(--bbodr-sub); }
.bbodr-empty { color: var(--bbodr-sub); }

@media print {
	/* Evidence is open on paper. A printed report whose citations are hidden
	   inside a collapsed element is a report with no citations. */
	.bbodr-evidence[open] > summary,
	.bbodr-evidence > summary { list-style: none; }
	.bbodr-evidence > ul { display: block !important; }
	.bbodr { color: #000; }
}

@media (forced-colors: active) {
	.bbodr-finding { border-left-width: 4px; border-left-style: solid; }
	.bbodr-pill { border: 1px solid CanvasText; }
}

/* ---- The next step ------------------------------------------------- */

/*
 * One action, shown whether or not the report has findings. A report that ends
 * without a next step ends at reading, and a page offering four things offers
 * none.
 */
.bbodr-next {
	margin: 2rem 0;
	padding: 1.3rem 1.4rem;
	border-radius: 14px;
	border: 1px solid var(--bbodr-line);
	background: linear-gradient(180deg, rgba(214,178,107,.1), transparent);
	max-width: 62ch;
}

.bbodr-next h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.bbodr-next p { margin: 0 0 1rem; }

.bbodr-btn {
	appearance: none;
	margin: 0 .5rem .5rem 0;
	padding: .6rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--bbodr-line);
	background: transparent;
	color: var(--bbodr-text);
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
}

.bbodr-btn--primary { border-color: var(--bbodr-accent); background: rgba(214,178,107,.18); color: var(--bbodr-text); }

/*
 * "Not now" is quieter but NOT hidden: same size, same hit area, no colour.
 * Styling a decline into near-invisibility is a dark pattern with good
 * intentions, and the person reading can tell.
 */
.bbodr-btn--quiet { color: var(--bbodr-sub); }

.bbodr-btn:focus-visible { outline: 2px solid var(--bbodr-accent); outline-offset: 2px; }
.bbodr-btn[disabled] { opacity: .6; cursor: default; }

.bbodr-claimform { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.bbodr-claimform input {
	flex: 1 1 14rem;
	padding: .55rem .8rem;
	border-radius: 8px;
	border: 1px solid var(--bbodr-line);
	background: rgba(0,0,0,.25);
	color: var(--bbodr-text);
	font: inherit;
}

.bbodr-said { margin-top: .8rem; color: var(--bbodr-accent); font-size: .95rem; }
.bbodr-said.is-error { color: var(--bbodr-alert-soft, #FF9AA1); }

.bbodr-book { margin: .4rem 0 0; }
.bbodr-book a { color: var(--bbodr-accent); }

/* A correction control on each finding, quiet until wanted. */
.bbodr-correct {
	appearance: none;
	margin-top: .6rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bbodr-sub);
	font: inherit;
	font-size: .85rem;
	text-decoration: underline;
	cursor: pointer;
}

.bbodr-finding textarea {
	display: block;
	width: 100%;
	margin-top: .6rem;
	padding: .55rem .7rem;
	border-radius: 8px;
	border: 1px solid var(--bbodr-line);
	background: rgba(0,0,0,.25);
	color: var(--bbodr-text);
	font: inherit;
	box-sizing: border-box;
}

@media print {
	/* Nothing to press on paper. */
	.bbodr-next, .bbodr-correct { display: none; }
}

@media (forced-colors: active) {
	.bbodr-btn { border: 1px solid ButtonText; }
}

/* ---- What would be different --------------------------------------- */

.bbodr-rails { margin: 2.5rem 0; }
.bbodr-rails h2 { margin: 0 0 .5rem; }
.bbodr-rails-intro { max-width: 62ch; color: var(--bbodr-sub); margin-bottom: 1.4rem; }

.bbodr-rail {
	padding: 1.2rem 1.3rem;
	margin-bottom: 1rem;
	border-radius: 14px;
	border: 1px solid var(--bbodr-line);
	background: var(--bbodr-card);
	max-width: 70ch;
}

.bbodr-rail h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.bbodr-rail p { margin: 0 0 .6rem; }
.bbodr-rail-now { color: var(--bbodr-sub); }
.bbodr-rail-figure { font-size: 1.05rem; }

/* The product name is last and quiet: the problem does the persuading. */
.bbodr-rail-product { margin: .8rem 0 0; font-size: .88rem; color: var(--bbodr-sub); }

.bbodr-assume { width: 100%; margin: .8rem 0 0; border-collapse: collapse; font-size: .9rem; }
.bbodr-assume caption { text-align: left; color: var(--bbodr-sub); padding-bottom: .3rem; }
.bbodr-assume th { text-align: left; font-weight: 400; color: var(--bbodr-sub); padding: .25rem 0; }
.bbodr-assume td { text-align: right; padding: .25rem 0; }

.bbodr-assume-input {
	width: 6rem;
	padding: .25rem .4rem;
	border-radius: 6px;
	border: 1px solid var(--bbodr-line);
	background: rgba(0,0,0,.25);
	color: var(--bbodr-text);
	font: inherit;
	text-align: right;
}

.bbodr-assume-input:focus-visible { outline: 2px solid var(--bbodr-accent); outline-offset: 1px; }

@media print {
	/* The assumptions table stays: it is what makes the figures checkable,
	   and a printed page is where somebody argues with them. */
	.bbodr-rail { break-inside: avoid; border: 1px solid #999; }
}

/* Old research says so before anything it asserts is read. */
.bbodr-stale {
	max-width: 62ch;
	margin: 0 0 1.5rem;
	padding: .8rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(243, 201, 107, .5);
	background: rgba(255, 176, 46, .1);
	color: var(--bbodr-caution);
}

.bbodr-asof { color: var(--bbodr-sub); font-size: .9rem; }

/* ---- Where this lands ---------------------------------------------- */

/*
 * A TABLE, NOT A CHART.
 *
 * The figures are text in table cells; the bars are a decoration drawn beside
 * them and marked aria-hidden. That means the panel works with CSS off, in a
 * screen reader, on paper, and in an email client — none of which is true of a
 * canvas, and all of which somebody will do with a report about their own
 * company.
 */
.bbodr-scores { margin: 2rem 0; max-width: 62ch; }
.bbodr-scores h2 { margin: 0 0 .8rem; }

.bbodr-scoretable { width: 100%; border-collapse: collapse; }
.bbodr-scoretable th,
.bbodr-scoretable td { padding: .5rem .6rem; text-align: left; vertical-align: middle; }
.bbodr-scoretable thead th { font-size: .85rem; font-weight: 500; color: var(--bbodr-sub); border-bottom: 1px solid var(--bbodr-line); }
.bbodr-scoretable tbody th { font-weight: 500; }
.bbodr-scoretable tbody tr + tr th,
.bbodr-scoretable tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.06); }

.bbodr-num { display: inline-block; min-width: 3.2em; font-variant-numeric: tabular-nums; }

.bbodr-bar {
	display: inline-block;
	width: 6rem;
	height: .5rem;
	vertical-align: middle;
	border-radius: 999px;
	background: rgba(255,255,255,.09);
	overflow: hidden;
}

.bbodr-bar-fill { display: block; height: 100%; background: var(--bbodr-accent); }
.bbodr-bar--quiet .bbodr-bar-fill { background: var(--bbodr-sub); }

/* Never "0%" — see the renderer. */
.bbodr-noscore { color: var(--bbodr-sub); font-style: italic; }

.bbodr-scores-note { margin-top: .8rem; font-size: .9rem; color: var(--bbodr-sub); }

/* Present to a screen reader, absent to the eye. Used for a table caption
   that would be redundant beside a visible heading. */
.bbodr-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Gaps closed --------------------------------------------------- */

.bbodr-rail-with { color: var(--bbodr-text); }

/* The value before script turns it into an input. Sized to match, so the
   layout does not shift when the page enhances. */
.bbodr-assume-value { display: inline-block; min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Motion, contrast and paper ------------------------------------ */

/*
 * REDUCED MOTION. Nothing here animates today, and the declaration exists so
 * that anything added later inherits the respect rather than needing somebody
 * to remember. A person who has asked their system for less movement has
 * usually asked for a reason.
 */
@media (prefers-reduced-motion: reduce) {
	.bbodr *,
	.bbodr *::before,
	.bbodr *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	/* A bar is decoration; in forced colours it becomes an outline so it does
	   not disappear into the background and leave an unexplained gap. */
	.bbodr-bar { border: 1px solid CanvasText; }
	.bbodr-bar-fill { background: CanvasText; }
	.bbodr-scoretable th,
	.bbodr-scoretable td { border-color: CanvasText; }
}

@media print {
	/*
	 * PAPER IS WHERE SOMEBODY ARGUES WITH THIS.
	 *
	 * A printed report is what gets taken into a meeting, so the parts that
	 * make it checkable have to survive the transition: the evidence, the
	 * assumptions, the coverage. Only the controls go.
	 */
	.bbodr {
		color: #000;
		background: #fff;
		--bbodr-text: #000;
		--bbodr-sub: #444;
		--bbodr-line: #999;
		--bbodr-card: #fff;
	}

	.bbodr-scoretable { break-inside: avoid; }

	/* The bar is meaningless in monochrome; the number beside it is not. */
	.bbodr-bar { display: none; }

	.bbodr-finding,
	.bbodr-rail { background: #fff; border: 1px solid #999; }

	.bbodr-stale { border: 2px solid #000; color: #000; background: #fff; }

	a[href]::after {
		/* A citation nobody can follow is not a citation once it is on paper. */
		content: ' (' attr( href ) ')';
		font-size: .8em;
		word-break: break-all;
	}
}

/*
 * FOCUS ON EVERYTHING FOCUSABLE.
 *
 * The buttons and inputs had a focus ring; the links inside evidence lists and
 * the correction control did not. A keyboard user tabbing through the citations
 * — which is exactly what somebody checking our work does — had no idea where
 * they were.
 */
.bbodr a:focus-visible,
.bbodr-correct:focus-visible,
.bbodr-evidence summary:focus-visible {
	outline: 2px solid var(--bbodr-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (forced-colors: active) {
	.bbodr a:focus-visible,
	.bbodr-correct:focus-visible,
	.bbodr-evidence summary:focus-visible {
		outline: 2px solid Highlight;
	}
}

/* ---- Setting a password -------------------------------------------- */

/*
 * The first thing somebody sees after clicking the invitation. It has to look
 * like the report they are about to read, not like a login form bolted onto
 * the front of it — the transition is the moment they decide whether this is a
 * real tool or a lead-capture page.
 */
.bbodr-passcode {
	max-width: 42ch;
	margin: 3rem auto;
	padding: 2rem;
	border-radius: 16px;
	border: 1px solid var(--bbodr-line);
	background: var(--bbodr-card);
}

.bbodr-passcode .bbodr-title { font-size: 1.5rem; margin: 0 0 1rem; }
.bbodr-passcode p { margin: 0 0 1.4rem; color: var(--bbodr-sub); }

.bbodr-passcode input[type="password"] {
	flex: 1 1 100%;
	padding: .7rem .9rem;
	border-radius: 8px;
	border: 1px solid var(--bbodr-line);
	background: rgba(0,0,0,.25);
	color: var(--bbodr-text);
	font: inherit;
}

.bbodr-passcode input[type="password"]:focus-visible {
	outline: 2px solid var(--bbodr-accent);
	outline-offset: 2px;
}

.bbodr-passcode .bbodr-btn { flex: 1 1 100%; margin-top: .2rem; }

@media print {
	/* Nothing to type on paper. */
	.bbodr-passcode { display: none; }
}

/* ================================================================== *
 * CHART SHAPES, 1.27.0
 *
 * Three shapes, one idea: every figure on this page is text with a bar drawn
 * beside it, never a picture of a figure. So each survives CSS failing, a
 * screen reader, and a printer - and none of them needs a chart library.
 * ================================================================== */

/* --- Scorecard: score against coverage, side by side ---------------- */

.bbodr-scoretable { width: 100%; border-collapse: collapse; }

.bbodr-scoretable caption { text-align: left; }

.bbodr-scoretable thead th {
	text-align: left;
	padding: 0 .6rem .5rem 0;
	font-size: .62rem;
	color: var(--bbodr-sub);
	border-bottom: 1px solid var(--bbodr-line-soft);
	font-weight: 500;
}

.bbodr-scoretable tbody th {
	text-align: left;
	font-weight: 600;
	font-size: .88rem;
	padding: .55rem .6rem .55rem 0;
	white-space: nowrap;
}

.bbodr-scoretable td { padding: .55rem .6rem .55rem 0; vertical-align: middle; }
.bbodr-scoretable tbody tr + tr th,
.bbodr-scoretable tbody tr + tr td { border-top: 1px solid var(--bbodr-line-soft); }

.bbodr-cell-num { width: 40%; }

.bbodr-num {
	display: inline-block;
	min-width: 2.2ch;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: .9rem;
	margin-right: .5rem;
}

.bbodr-num--quiet { font-weight: 500; color: var(--bbodr-sub); }

.bbodr-bar {
	display: inline-block;
	width: calc(100% - 3.4ch);
	height: 7px;
	vertical-align: middle;
	border-radius: 999px;
	background: rgba(200, 216, 235, .09);
	overflow: hidden;
}

.bbodr-bar-fill { display: block; height: 100%; background: var(--bbodr-accent); border-radius: 999px; }
.bbodr-bar--quiet .bbodr-bar-fill { background: var(--bbodr-line); }

.bbodr-noscore { font-size: .82rem; color: var(--bbodr-sub); font-style: italic; }

/*
 * The verdict word carries the colour, and coverage decides it before score
 * does - a score built on almost nothing is a finding about our research, not
 * about the company.
 */
.bbodr-verdict-word {
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .64rem;
	white-space: nowrap;
}

.bbodr-verdict-word.is-strong  { color: var(--bbodr-ok); }
.bbodr-verdict-word.is-mixed   { color: var(--bbodr-caution); }
.bbodr-verdict-word.is-weak    { color: var(--bbodr-caution); }
.bbodr-verdict-word.is-thin,
.bbodr-verdict-word.is-unknown { color: var(--bbodr-sub); }

.bbodr-scores-note { font-size: .78rem; color: var(--bbodr-sub); margin: .9rem 0 0; }

/* --- Findings: rows that open -------------------------------------- */

/*
 * THREE ACROSS, FALLING BACK ON ITS OWN.
 *
 * auto-fill with a 19rem floor rather than a hard three: in the main column of
 * a 1680px shell that lands on three, on a laptop two, on a phone one, without
 * a breakpoint per size. A hard `repeat(3, 1fr)` would give three 12rem columns
 * on a small laptop, which is narrower than the titles.
 *
 * align-items: start so an opened card grows on its own instead of stretching
 * every sibling in its row to match.
 */
.bbodr-findings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: .75rem;
	align-items: start;
}

.bbodr-finding {
	border: 1px solid var(--bbodr-line-soft);
	border-left: 3px solid var(--bbodr-line);
	border-radius: 10px;
	background: var(--bbodr-card);
	min-width: 0;
	overflow: hidden;
}

/*
 * Severity by colour AND by the word in the pill. Colour alone would make the
 * distinction invisible to a reader who cannot see it, on a page whose whole
 * job is being checkable. Info is stated rather than left to the default, so
 * the set reads as four deliberate choices rather than three and a leftover.
 */
.bbodr-finding.is-info        { border-left-color: var(--bbodr-line); }
.bbodr-finding.is-opportunity { border-left-color: var(--bbodr-accent); }
.bbodr-finding.is-gap         { border-left-color: var(--bbodr-caution); }
/* Carpet Red, and only here: this is the one place alarm is meant. */
.bbodr-finding.is-risk        { border-left-color: var(--bbodr-alert); }
.bbodr-finding.is-corrected   { border-left-style: dashed; }

/*
 * STACKED, NOT A ROW OF FLEX ITEMS.
 *
 * In a full-width row the title and both pills sat on one line. In a third of a
 * column they wrap unpredictably and the chevron ends up orphaned. A two-row
 * grid - title with the chevron beside it, pills beneath - is stable at every
 * width.
 */
.bbodr-finding-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		'dot title chevron'
		'.   pills pills';
	align-items: center;
	gap: .35rem .5rem;
	padding: .7rem .85rem;
	cursor: pointer;
	list-style: none;
}

.bbodr-finding-head > .bbodr-dot { grid-area: dot; }

.bbodr-finding-meta {
	grid-area: pills;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .4rem;
	min-width: 0;
}

.bbodr-finding-head::-webkit-details-marker { display: none; }

.bbodr-finding-title {
	grid-area: title;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.35;
	min-width: 0;
	text-wrap: balance;
}

.bbodr-finding-head::after {
	grid-area: chevron;
	align-self: start;
	margin-top: .3rem;
	content: '';
	width: .45rem;
	height: .45rem;
	border-right: 2px solid var(--bbodr-sub);
	border-bottom: 2px solid var(--bbodr-sub);
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
}

.bbodr-finding[open] .bbodr-finding-head::after { transform: rotate(-135deg); }
.bbodr-finding-head:hover { background: rgba(200, 216, 235, .05); }

.bbodr-finding-body {
	padding: 0 .85rem .85rem;
	border-top: 1px solid var(--bbodr-line-soft);
	font-size: .9rem;
	color: var(--bbodr-sub);
}

.bbodr-finding-body p { margin: .7rem 0 0; }

/* --- Comparisons: ranked bars -------------------------------------- */

.bbodr-rails-intro,
.bbodr-rails-sub { font-size: .8rem; color: var(--bbodr-sub); margin: 0 0 .75rem; }
.bbodr-rails-sub { margin-top: 1.25rem; }

.bbodr-rail {
	border: 1px solid var(--bbodr-line-soft);
	border-radius: 10px;
	background: var(--bbodr-card);
	margin-bottom: .5rem;
	overflow: hidden;
}

.bbodr-rail-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .35rem;
	padding: .7rem .9rem;
	cursor: pointer;
	list-style: none;
}

.bbodr-rail-head::-webkit-details-marker { display: none; }
.bbodr-rail-head:hover { background: rgba(200, 216, 235, .05); }
.bbodr-rail-label { font-weight: 600; font-size: .92rem; }

/*
 * Scaled against the largest row, not an absolute maximum, so the shape of the
 * comparison survives a report where every figure happens to be small.
 */
.bbodr-rail-track {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgba(200, 216, 235, .09);
	overflow: hidden;
}

.bbodr-rail-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bbodr-line), var(--bbodr-accent));
}

.bbodr-rail-figure { font-size: .78rem; color: var(--bbodr-sub); font-variant-numeric: tabular-nums; }
.bbodr-rail-body { padding: 0 .9rem .9rem; border-top: 1px solid var(--bbodr-line-soft); font-size: .88rem; }
.bbodr-rail-body p { margin: .75rem 0 0; }
.bbodr-rail-now, .bbodr-rail-with { color: var(--bbodr-sub); }
.bbodr-rail-with strong, .bbodr-rail-now strong { color: var(--bbodr-text); }
.bbodr-rail-product { font-size: .82rem; color: var(--bbodr-accent); }
.bbodr-rail-effort { color: var(--bbodr-sub); margin-left: .4rem; }

.bbodr-assume { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .8rem; }
.bbodr-assume caption { text-align: left; font-size: .62rem; color: var(--bbodr-sub); padding-bottom: .3rem; }
.bbodr-assume th { text-align: left; font-weight: 400; color: var(--bbodr-sub); padding: .25rem .5rem .25rem 0; }
.bbodr-assume td { padding: .25rem 0; }

.bbodr-assume-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	border-bottom: 1px dashed var(--bbodr-line);
	padding-bottom: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.bbodr-finding-head::after { transition: none; }
}

@media print {
	/* A printed report is the whole report, not a list of headings. */
	.bbodr-finding[open],
	.bbodr-finding,
	.bbodr-rail,
	.bbodr-widget { break-inside: avoid; }
}

/* A correction the reader sent us, acknowledged on the row itself. */
.bbodr-pill--corrected { border-color: var(--bbodr-ok); color: var(--bbodr-ok); }

/* A source we can name but not link. Still a source, so it still reads as one. */
.bbodr-cite-plain { color: var(--bbodr-text); }

/*
 * The one sentence in the comparison section that is about THEM rather than
 * about the product. Marked so it does not read as more body copy.
 */
.bbodr-rail-why {
	border-left: 2px solid var(--bbodr-accent);
	padding-left: .7rem;
	color: var(--bbodr-text);
}

/*
 * Marked only on the self-referential citations. Badging both kinds would put a
 * label on every line and teach people to stop reading them.
 */
.bbodr-cite-own {
	font-size: .7rem;
	color: var(--bbodr-sub);
	border: 1px solid var(--bbodr-line-soft);
	border-radius: 999px;
	padding: 0 .45rem;
	white-space: nowrap;
}

/* ================================================================== *
 * THE RAIL BOARD
 *
 * The site's rail cards, filled in with their evidence. Status is a filled
 * block rather than a dot, because it is the thing a reader should see from
 * across a desk rather than hunt for.
 * ================================================================== */

.bbodr-board { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.bbodr-board-key { margin: 0; font-size: .8rem; color: var(--bbodr-sub); }

.bbodr-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: .75rem;
	align-items: start;
}

.bbodr-tile {
	border: 1px solid var(--bbodr-line);
	border-radius: 12px;
	background: var(--bbodr-card);
	overflow: hidden;
	min-width: 0;
}

.bbodr-tile-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'state   state'
		'name    chev'
		'area    chev'
		'figure  figure';
	gap: .2rem .5rem;
	padding: 0 0 .85rem;
	cursor: pointer;
	list-style: none;
}

.bbodr-tile-head::-webkit-details-marker { display: none; }

/*
 * THE STATE BAR. Full bleed across the top of the tile, in the tile's colour,
 * so nine tiles read as a board at a glance rather than as nine paragraphs.
 */
.bbodr-tile-state {
	grid-area: state;
	display: block;
	padding: .5rem .9rem;
	margin-bottom: .5rem;
	font-family: var(--cf-mono, 'IBM Plex Mono'), 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .7rem;
	font-weight: 500;
	color: var(--bbodr-bg);
}

.bbodr-tile-name {
	grid-area: name;
	padding-left: .9rem;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.02em;
	min-width: 0;
}

.bbodr-tile-area {
	grid-area: area;
	padding-left: .9rem;
	font-size: .74rem;
	color: var(--bbodr-sub);
}

.bbodr-tile-figure {
	grid-area: figure;
	padding: .5rem .9rem 0;
	margin-top: .4rem;
	border-top: 1px solid var(--bbodr-line-soft);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--bbodr-accent);
}

.bbodr-tile-head::after {
	grid-area: chev;
	align-self: center;
	margin-right: .9rem;
	content: '';
	width: .45rem;
	height: .45rem;
	border-right: 2px solid var(--bbodr-sub);
	border-bottom: 2px solid var(--bbodr-sub);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.bbodr-tile[open] .bbodr-tile-head::after { transform: rotate(-135deg); }

/*
 * FOUR STATES, AND THE DIFFERENCE BETWEEN THEM IS THE HONESTY OF THE PAGE.
 * "We found nothing" and "this does not apply to you" are different answers and
 * must not look alike. Carpet Red is reserved for the one that asks for a
 * decision.
 */
.bbodr-tile.is-attention                    { border-color: var(--bbodr-alert); }
.bbodr-tile.is-attention .bbodr-tile-state  { background: var(--bbodr-alert); color: var(--bbodr-text); }
.bbodr-tile.is-handled   .bbodr-tile-state  { background: var(--bbodr-ok); }
.bbodr-tile.is-unseen    .bbodr-tile-state  { background: var(--bbodr-line); color: var(--bbodr-text); }
.bbodr-tile.is-na        .bbodr-tile-state  { background: rgba(200, 216, 235, .12); color: var(--bbodr-sub); }
.bbodr-tile.is-na                           { opacity: .72; }

.bbodr-tile-body {
	padding: .85rem;
	border-top: 1px solid var(--bbodr-line-soft);
	font-size: .87rem;
	color: var(--bbodr-sub);
}

.bbodr-tile-body p { margin: 0 0 .7rem; }
.bbodr-tile-body p:last-child { margin-bottom: 0; }
.bbodr-tile-body strong { color: var(--bbodr-text); }
.bbodr-tile-blurb { color: var(--bbodr-text); }

/* The claim the whole product rests on. Marked so it does not read as body copy. */
.bbodr-tile-human {
	border-left: 2px solid var(--bbodr-ok);
	padding-left: .7rem;
}

.bbodr-tile-na { font-style: italic; }

.bbodr-tile-findings { margin: 0 0 .7rem; padding-left: 0; list-style: none; }

.bbodr-tile-findings li {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin-bottom: .3rem;
	color: var(--bbodr-text);
}

.bbodr-tile-unseen { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	.bbodr-tile-head::after { transition: none; }
}

/*
 * The before-and-after pair inside a tile. Marked so the comparison reads as a
 * comparison rather than as two more sentences of body copy.
 */
.bbodr-tile-now  { color: var(--bbodr-sub); }
.bbodr-tile-with { color: var(--bbodr-text); }
.bbodr-tile-seen { margin-bottom: .35rem; color: var(--bbodr-text); }

/*
 * The one caveat that stays in the fold. A report built only from a company's
 * own pages is not methodology, it is a qualifier on every sentence after it.
 */
.bbodr-mirror {
	margin: 1.1rem 0 0;
	padding-left: .9rem;
	border-left: 2px solid var(--bbodr-caution);
	font-size: .88rem;
	color: var(--bbodr-sub);
	max-width: 60ch;
}

/*
 * WHAT THEY TOLD US, VISIBLY NOT WHAT WE FOUND.
 *
 * This sits where a finding would, so it is marked rather than styled to blend
 * in. Amber rather than the ok green: the answer is useful and it is unverified,
 * and those are different things.
 */
.bbodr-tile.is-told .bbodr-tile-state { background: var(--bbodr-caution); }
.bbodr-cell.is-told { border-left-color: var(--bbodr-caution); }
.bbodr-cell.is-told .bbodr-cell-state { color: var(--bbodr-caution); }
.bbodr-key-dot.is-told { background: var(--bbodr-caution); }

.bbodr-tile-told {
	border-left: 2px solid var(--bbodr-caution);
	padding-left: .7rem;
	color: var(--bbodr-text);
}

.bbodr-tile-unverified { font-style: italic; font-size: .82rem; }

/*
 * How they work today. Cyan-marked because it is the one line in the tile drawn
 * from their own evidence rather than from our catalogue, and it sits above the
 * generic pair for the same reason.
 */
.bbodr-tile-practice {
	border-left: 2px solid var(--bbodr-accent);
	padding-left: .7rem;
	color: var(--bbodr-text);
}

/*
 * WHERE A PERSON PICKS IT UP.
 *
 * Sits between the analysis and the claim button, and is deliberately warmer
 * than either: green rather than the cyan the instruments use, because it is
 * the one part of the document that is about us rather than about them.
 */
.bbodr-human {
	grid-column: 1 / -1;
	margin: 2.5rem 0 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--cf-line, rgba(200, 216, 235, .13));
	border-left: 3px solid var(--cf-green, #5FE0B1);
	border-radius: 10px;
	background: var(--cf-panel, #10161E);
}

.bbodr-human h2 {
	margin: 0 0 .9rem;
	font-size: clamp(1.2rem, 3vw, 1.55rem);
	line-height: 1.2;
	color: var(--cf-white, #F5F7FA);
}

.bbodr-human p {
	margin: 0 0 .9rem;
	max-width: 62ch;
	color: var(--cf-silver, #B7C0CC);
}

.bbodr-human p:last-child { margin-bottom: 0; }

/* ---- saving it, and the workspace ----------------------------------- */

.bbodr-save,
.bbodr-workspace {
	grid-column: 1 / -1;
	margin: 2rem 0 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--cf-line, rgba(200, 216, 235, .13));
	border-left: 3px solid var(--cf-green, #5FE0B1);
	border-radius: 10px;
	background: var(--cf-panel, #10161E);
}

.bbodr-save h2,
.bbodr-workspace h2 {
	margin: 0 0 .8rem;
	font-size: clamp(1.2rem, 3vw, 1.55rem);
	line-height: 1.2;
	color: var(--cf-white, #F5F7FA);
}

.bbodr-save p,
.bbodr-workspace p {
	margin: 0 0 1rem;
	max-width: 62ch;
	color: var(--cf-silver, #B7C0CC);
}

/*
 * THE GREEN ONE. Green rather than the cyan the instruments use, because it is
 * the only thing on this page that is an offer rather than a finding, and it
 * should not read as another reading control.
 */
.bbodr-btn--save {
	display: inline-block;
	padding: .9rem 1.7rem;
	border: 0;
	border-radius: 999px;
	background: var(--cf-green, #5FE0B1);
	color: var(--cf-black, #05070A);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 680;
	cursor: pointer;
	list-style: none;
	text-decoration: none;
}

.bbodr-btn--save:hover { filter: brightness(1.07); }

/* Safari draws a disclosure triangle on summary without this. */
.bbodr-btn--save::-webkit-details-marker { display: none; }

.bbodr-savebox[open] .bbodr-btn--save { margin-bottom: 1.25rem; }

.bbodr-saveform p { margin: 0 0 1rem; max-width: 26rem; }

.bbodr-saveform label {
	display: block;
	margin-bottom: .3rem;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cf-silver, #B7C0CC);
}

.bbodr-saveform input {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--cf-line-strong, rgba(200, 216, 235, .24));
	border-radius: 6px;
	background: var(--cf-panel-2, #141C26);
	color: var(--cf-white, #F5F7FA);
	font: inherit;
}

.bbodr-hint {
	display: block;
	margin-top: .35rem;
	font-size: .85rem;
	color: var(--cf-silver, #B7C0CC);
}

.bbodr-waiting {
	max-width: 40rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 3rem) 1rem;
	text-align: center;
}