/* ============================================================
   My Custom Callout Block — style.css  (frontend)
   Variants   : scenario | result-ok | result-fail
   Variations : default  | warning   | success    | info
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
.mcb-callout {
	/* Spacing & shape */
	--mcb-radius      : 6px;
	--mcb-border-w    : 1px;
	--mcb-left-accent : 4px;
	--mcb-pad-v       : 1.25rem;
	--mcb-pad-h       : 1.5rem;
	--mcb-gap         : 0.6rem;
	--mcb-dot-size    : 7px;

	/* Typography */
	--mcb-title-size  : 11px;
	--mcb-body-size   : 0.9375rem;    /* 15px at 16px base */
	--mcb-title-font  : ui-monospace, "JetBrains Mono", "Cascadia Code", monospace;
	--mcb-body-font   : inherit;
	--mcb-title-ls    : 0.12em;

	/* Neutral palette (default/scenario) */
	--mcb-bg          : #f7f4ef;
	--mcb-border      : #d8d3cb;
	--mcb-accent      : #4a4640;
	--mcb-title-color : #4a4640;
	--mcb-body-color  : #4a4640;
	--mcb-dot-color   : #4a4640;
}

/* ── Base block reset & shared layout ───────────────────────── */
div.mcb-callout {
	box-sizing   : border-box;
	margin-block : 1.5rem;
	line-height  : 1.6;
}

.mcb-callout *,
.mcb-callout *::before,
.mcb-callout *::after {
	box-sizing: inherit;
}

.mcb-callout p,
.mcb-callout div,
.mcb-callout span {
	margin: 0;
}


/* ════════════════════════════════════════════════════════════
   VARIANT: SCENARIO
   Card with left accent bar
   ════════════════════════════════════════════════════════════ */
.mcb-callout--scenario {
	background    : var(--mcb-bg);
	border        : var(--mcb-border-w) solid var(--mcb-border);
	border-radius : var(--mcb-radius);
	padding       : var(--mcb-pad-v) var(--mcb-pad-h);
	position      : relative;
}

.mcb-callout--scenario::before {
	content       : '';
	position      : absolute;
	inset-inline-start : 0;
	inset-block   : 0;
	width         : var(--mcb-left-accent);
	border-radius : var(--mcb-radius) 0 0 var(--mcb-radius);
	background    : var(--mcb-accent);
}

.mcb-callout--scenario .mcb-callout__title {
	font-family    : var(--mcb-title-font);
	font-size      : var(--mcb-title-size);
	letter-spacing : var(--mcb-title-ls);
	text-transform : uppercase;
	font-weight    : 500;
	color          : var(--mcb-title-color);
	margin-bottom  : var(--mcb-gap);
}

.mcb-callout--scenario .mcb-callout__content {
	font-family : var(--mcb-body-font);
	font-size   : var(--mcb-body-size);
	color       : var(--mcb-body-color);
}

.mcb-callout--scenario .mcb-callout__content p {
	margin-bottom: 0.6rem;
}

.mcb-callout--scenario .mcb-callout__content p:last-child {
	margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   VARIANT: RESULT-OK  /  RESULT-FAIL
   Shared result box base
   ════════════════════════════════════════════════════════════ */
.mcb-callout--result-ok,
.mcb-callout--result-fail {
    background    : var(--mcb-bg);
	border        : var(--mcb-border-w) solid var(--mcb-border);
	border-radius : var(--mcb-radius);
	padding       : 1rem 1.25rem;
}

/* Title row: monospace label with a status dot */
.mcb-callout--result-ok .mcb-callout__title,
.mcb-callout--result-fail .mcb-callout__title {
	display        : flex;
	align-items    : center;
	gap            : 6px;
	font-family    : var(--mcb-title-font);
	font-size      : var(--mcb-title-size);
	letter-spacing : var(--mcb-title-ls);
	text-transform : uppercase;
	font-weight    : 500;
	color          : var(--mcb-title-color);
	margin-bottom  : 0.5rem;
}

/* The coloured dot */
.mcb-callout__dot {
	display       : inline-block;
	flex-shrink   : 0;
	width         : var(--mcb-dot-size);
	height        : var(--mcb-dot-size);
	border-radius : 50%;
	background    : var(--mcb-dot-color);
}

.mcb-callout--result-ok .mcb-callout__content,
.mcb-callout--result-fail .mcb-callout__content {
	font-size : var(--mcb-body-size);
	color     : var(--mcb-body-color);
}


/* ════════════════════════════════════════════════════════════
   STYLE VARIATION TOKENS
   Each variation overrides the CSS custom properties.
   All three variants (scenario, result-ok, result-fail)
   inherit these automatically.
   ════════════════════════════════════════════════════════════ */

/* ── DEFAULT (warm neutral — matches the article) ─────────── */
.mcb-callout--default {
	--mcb-bg          : #f7f4ef;
	--mcb-border      : #d8d3cb;
	--mcb-accent      : #4a4640;
	--mcb-title-color : #4a4640;
	--mcb-body-color  : #4a4640;
	--mcb-dot-color   : #4a4640;
}

/* result-ok with Default style */
.mcb-callout--result-ok.mcb-callout--default {
	--mcb-bg          : #f0f7f2;
	--mcb-border      : #a8d8b8;
	--mcb-accent      : #2d6a4f;
	--mcb-title-color : #2d6a4f;
	--mcb-body-color  : #2d6a4f;
	--mcb-dot-color   : #2d6a4f;
}

/* result-fail with Default style */
.mcb-callout--result-fail.mcb-callout--default {
	--mcb-bg          : #fde8e8;
	--mcb-border      : #f0b8b8;
	--mcb-accent      : #b22222;
	--mcb-title-color : #b22222;
	--mcb-body-color  : #7a1a1a;
	--mcb-dot-color   : #b22222;
}


/* ── WARNING (amber) ──────────────────────────────────────── */
.mcb-callout--warning {
	--mcb-bg          : #fef9ec;
	--mcb-border      : #f5d87a;
	--mcb-accent      : #b87a0a;
	--mcb-title-color : #854f0b;
	--mcb-body-color  : #633806;
	--mcb-dot-color   : #ba7517;
}

.mcb-callout--result-ok.mcb-callout--warning {
	--mcb-bg          : #f5fbf0;
	--mcb-border      : #b8dba0;
	--mcb-accent      : #3b6d11;
	--mcb-title-color : #27500a;
	--mcb-body-color  : #27500a;
	--mcb-dot-color   : #639922;
}

.mcb-callout--result-fail.mcb-callout--warning {
	--mcb-bg          : #fef4e8;
	--mcb-border      : #f5c888;
	--mcb-accent      : #854f0b;
	--mcb-title-color : #633806;
	--mcb-body-color  : #633806;
	--mcb-dot-color   : #ba7517;
}


/* ── SUCCESS (green) ──────────────────────────────────────── */
.mcb-callout--success {
	--mcb-bg          : #eaf3de;
	--mcb-border      : #a8d878;
	--mcb-accent      : #3b6d11;
	--mcb-title-color : #27500a;
	--mcb-body-color  : #173404;
	--mcb-dot-color   : #639922;
}

.mcb-callout--result-ok.mcb-callout--success {
	--mcb-bg          : #d8f3dc;
	--mcb-border      : #80c890;
	--mcb-accent      : #2d6a4f;
	--mcb-title-color : #2d6a4f;
	--mcb-body-color  : #173404;
	--mcb-dot-color   : #2d6a4f;
}

.mcb-callout--result-fail.mcb-callout--success {
	--mcb-bg          : #fef0e8;
	--mcb-border      : #f0c0a0;
	--mcb-accent      : #993c1d;
	--mcb-title-color : #712b13;
	--mcb-body-color  : #4a1b0c;
	--mcb-dot-color   : #d85a30;
}


/* ── INFO (blue) ──────────────────────────────────────────── */
.mcb-callout--info {
	--mcb-bg          : #e6f1fb;
	--mcb-border      : #85b7eb;
	--mcb-accent      : #185fa5;
	--mcb-title-color : #0c447c;
	--mcb-body-color  : #042c53;
	--mcb-dot-color   : #378add;
}

.mcb-callout--result-ok.mcb-callout--info {
	--mcb-bg          : #e8f6f0;
	--mcb-border      : #80c8b0;
	--mcb-accent      : #0f6e56;
	--mcb-title-color : #085041;
	--mcb-body-color  : #04342c;
	--mcb-dot-color   : #1d9e75;
}

.mcb-callout--result-fail.mcb-callout--info {
	--mcb-bg          : #f0e8f8;
	--mcb-border      : #c0a0e0;
	--mcb-accent      : #534ab7;
	--mcb-title-color : #3c3489;
	--mcb-body-color  : #26215c;
	--mcb-dot-color   : #7f77dd;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media ( max-width: 480px ) {
	.mcb-callout {
		--mcb-pad-v : 1rem;
		--mcb-pad-h : 1.1rem;
	}
}