/* ─────────────────────────────────────────────────────────────────
 *  Callout Boxes 18 — frontend + block-editor stylesheet
 *  v2.0 — redesigned on RomaFlow Brand Kit v2.1 ("MD3 Tension × Bento × Soft-Touch")
 *
 *  Compliant with SYSTEM.md (RomaFlow CSS + Fonts + Globals):
 *    §1 never reads/writes --text-primary / --text-secondary / --rf-ink
 *    §2 theme swap through [data-rf-theme] only — no prefers-color-scheme
 *    §3 fonts inherited via var(--rf-font) / var(--rf-font-mono)
 *    §4 mobile-first, real HTML flow (min-width queries), reflow ≤380px
 *    §5 own namespace (--cb-*) with literal values
 *    §6 data-rf-atmo is never read — space inherits the dark text contract
 *
 *  Every literal color/shadow/radius below is re-derived from
 *  DESIGN/01_TOKENS_V2.1.css so this file can be audited value-for-value
 *  against the brand kit despite being fully self-contained (no
 *  dependency on romaflow-blocks-801's tokens — this plugin loads on
 *  post content outside the `.rf-801` wrapper). See PLAN.md in
 *  site-work/2026-08-29-callout-boxes-gutenberg/ for the full rationale
 *  behind every color/shape choice.
 * ───────────────────────────────────────────────────────────────── */

/* ═══════════ Shared tokens — dark is the site default ═══════════ */

.cb,
.cb-grad-wrap,
.cb-block-type-bar {
	/* Surfaces — literal v2.1 surface-low / surface-lowest (dark) */
	--cb-surface: #12181F;
	--cb-surface-plain: #0B0F14;

	/* Text — literal v2.1 --text-primary / --text-secondary / --text-outline (dark) */
	--cb-ink: #E6EBF2;
	--cb-muted: #B8C2D0;
	--cb-meta: #8B95A5;

	/* Lines + elevation — literal v2.1 --outline-variant / --elev-1 / --elev-3 (dark) */
	--cb-line: rgba(255, 255, 255, .10);
	--cb-line-strong: rgba(255, 255, 255, .18);
	--cb-elev: 0 1px 3px 1px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .55);
	--cb-elev-lg: 0 4px 8px 3px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .45);

	/* Per-variant accent + tinted surface, re-pointed by each rule below */
	--cb-accent: #00E5CC;
	--cb-tint: rgba(0, 229, 204, .10);

	/* Typography — inherited from the site, never hardcoded */
	--cb-font: var(--rf-font, "Noto Sans Hebrew", system-ui, sans-serif);
	--cb-font-mono: var(--rf-font-mono, "JetBrains Mono", ui-monospace, monospace);

	/* Shape — v2.1 §04 tension-shape system, literal values, used selectively
	   (cards/panels/chips only — never applied indiscriminately, per the token spec) */
	--cb-ts-xs: 2px;
	--cb-ts-s: 4px;
	--cb-ts-m: 12px;
	--cb-ts-l: 20px;
	--cb-ts-full: 9999px;

	--cb-pad-b: 14px;
	--cb-pad-i: 16px;
}

[data-rf-theme="light"] .cb,
[data-rf-theme="light"] .cb-grad-wrap,
[data-rf-theme="light"] .cb-block-type-bar {
	/* Surfaces — literal v2.1 surface-low / surface (light) */
	--cb-surface: #FFFFFF;
	--cb-surface-plain: #FAF9F5;

	/* Text — literal v2.1 --text-primary / --text-secondary / --text-outline (light) */
	--cb-ink: #0F172A;
	--cb-muted: #475569;
	--cb-meta: #64748B;

	--cb-line: rgba(15, 23, 42, .12);
	--cb-line-strong: rgba(15, 23, 42, .20);
	--cb-elev: 0 1px 3px 1px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .12);
	--cb-elev-lg: 0 4px 8px 3px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .14);
}

/* ═══════════ Base ═══════════ */

.cb {
	box-sizing: border-box;
	font-family: var(--cb-font);
	margin-block: 1.5em;
	color: var(--cb-ink);
	overflow-wrap: anywhere;
	word-break: normal;
}

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

.cb-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	line-height: 1.3;
	margin-block-end: 10px;
	color: var(--cb-accent);
	font-family: var(--cb-font-mono);
	letter-spacing: .01em;
}

.cb-head svg { flex-shrink: 0; }

.cb-body p {
	margin: 0 0 .6em;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cb-muted);
}

.cb-body p:last-child { margin-block-end: 0; }
.cb-body a { color: var(--cb-accent); }

/* Shared box shell — each variant only re-points its tokens. */
.cb-info, .cb-warning, .cb-success, .cb-error,
.cb-tip, .cb-note, .cb-dark, .cb-quote, .cb-step,
.cb-highlight, .cb-stat, .cb-terminal, .cb-protip,
.cb-checklist, .cb-gradient, .cb-neon, .cb-emoji {
	padding: var(--cb-pad-b) var(--cb-pad-i);
}

/* ═══════════ 1–4. Status boxes — tinted surface + start rule ═══════════
   Shape: --cb-ts-l on the far corners only (the accent-bearing corners stay
   sharp) — v2.1's "one corner open" panel treatment. */

.cb-info, .cb-warning, .cb-success, .cb-error {
	background-color: var(--cb-tint);
	border-inline-start: 4px solid var(--cb-accent);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: var(--cb-ts-l);
	border-end-end-radius: var(--cb-ts-l);
}

/* info: literal --accent-blue-text */
.cb-info    { --cb-accent: #8FB5FF; --cb-tint: rgba(0, 87, 255, .14); }
/* warning/success/error: bespoke semantic colors — the brand seeds have no
   green/red/orange, exactly like MD3's own dedicated error role sits outside
   its brand-seed tertiary/secondary. Values tuned for AA, not brand hue. */
.cb-warning { --cb-accent: #FBBF4E; --cb-tint: rgba(245, 158, 11, .14); }
.cb-success { --cb-accent: #6EE7A5; --cb-tint: rgba(34, 197, 94, .14); }
.cb-error   { --cb-accent: #FF8A8A; --cb-tint: rgba(239, 68, 68, .14); }

[data-rf-theme="light"] .cb-info    { --cb-accent: #0044C7; --cb-tint: #EEF4FF; }
[data-rf-theme="light"] .cb-warning { --cb-accent: #B45309; --cb-tint: #FFF8E8; }
[data-rf-theme="light"] .cb-success { --cb-accent: #15803D; --cb-tint: #EFFCF3; }
[data-rf-theme="light"] .cb-error   { --cb-accent: #B91C1C; --cb-tint: #FEF2F2; }

/* ═══════════ 5. Tip — brand wash ═══════════
   Shape: --cb-ts-b (20/0/20/0) — v2.1's "inverse panel" primitive. */

.cb-tip {
	--cb-accent: #C7ABFF; /* literal --accent-purple-text (dark) */
	position: relative;
	overflow: hidden;
	border-radius: var(--cb-ts-l) 0 var(--cb-ts-l) 0;
	background-color: var(--cb-surface);
	background-image: linear-gradient(120deg, rgba(140, 82, 255, .16), rgba(0, 229, 204, .10));
	border: 1px solid var(--cb-line);
}

.cb-tip::before {
	content: "";
	position: absolute;
	inset-block-start: -20px;
	inset-inline-start: -20px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgba(140, 82, 255, .16);
	pointer-events: none;
}

[data-rf-theme="light"] .cb-tip { --cb-accent: #6E35D9; /* literal --accent-purple-text (light) */ }

/* ═══════════ 6. Note — top rule ═══════════ */

.cb-note {
	--cb-accent: #C7ABFF; /* literal --accent-purple-text (dark) — was a raw ramp value, wrong tier for text */
	background-color: var(--cb-surface);
	border-block-start: 4px solid var(--cb-accent);
	border-radius: 0 0 var(--cb-ts-l) var(--cb-ts-l);
	box-shadow: var(--cb-elev);
}

[data-rf-theme="light"] .cb-note { --cb-accent: #6E35D9; }

/* ═══════════ 7. Dark — deliberately dark in BOTH themes ═══════════
   Shape: --cb-ts-b, matching .cb-tip/.cb-emoji's panel treatment. */

.cb-dark {
	--cb-accent: #00E5CC; /* literal brand cyan seed = --accent-cyan-text (dark) — was a ramp value */
	--cb-ink: #E6EBF2;
	--cb-muted: #B8C2D0;
	background-color: #161D26;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--cb-ts-l) 0 var(--cb-ts-l) 0;
}

/* ═══════════ 8. Pull quote — "Authority" voice register (purple) ═══════════
   Shape: sharpened diamond, literal --cb-ts-l / --cb-ts-xs. */

.cb-quote {
	position: relative;
	background-color: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-ts-l) var(--cb-ts-xs) var(--cb-ts-l) var(--cb-ts-xs);
	box-shadow: var(--cb-elev-lg);
	padding-block: 22px;
}

.cb-quote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: #C7ABFF; /* literal --accent-purple-text (dark) */
	opacity: .55;
	pointer-events: none;
}

[data-rf-theme="light"] .cb-quote::before { color: #6E35D9; opacity: .35; }

.cb-quote blockquote {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--cb-ink);
}

.cb-quote cite {
	font-size: .8125rem;
	font-style: normal;
	color: var(--cb-meta);
}

/* ═══════════ 9. Step ═══════════
   Shape: --cb-ts-a (0/20/0/20) — v2.1 tags this shape literally "cards, chips". */

.cb-step {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
	background-color: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: 0 var(--cb-ts-l) 0 var(--cb-ts-l);
}

.cb-step-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* literal v2.1 --rf-gradient-cta — AA-safe white text on both stops */
	background-image: linear-gradient(45deg, #00776B 0%, #0044C7 100%);
	color: #FFFFFF;
	font-family: var(--cb-font-mono);
	font-weight: 700;
	font-size: .875rem;
}

.cb-step-content { flex: 1 1 200px; min-width: 0; }

.cb-step-title {
	margin-block-end: 4px;
	font-weight: 700;
	color: var(--cb-ink);
}

/* ═══════════ 10. Highlight strip — brand's 4th accent (pink) ═══════════
   The old design used yellow, which isn't in the brand palette at all.
   v2.1's own token comment names pink as the accent for exactly this:
   "4th ACCENT ONLY: hovers, highlights, badges". Shape stays a contained
   --cb-ts-m — a full pill reads oddly once body copy wraps to 2+ lines. */

.cb-highlight {
	--cb-accent: #FF7FBF; /* literal --accent-pink-text (dark) */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	background-color: rgba(255, 0, 128, .10);
	border: 1px solid rgba(255, 0, 128, .28);
	border-radius: var(--cb-ts-m);
}

[data-rf-theme="light"] .cb-highlight {
	--cb-accent: #B8005C; /* literal --accent-pink-text (light) */
	background-color: #FFE9F4;
	border-color: #FFB8DD;
}

.cb-icon-emoji { flex-shrink: 0; font-size: 1.8rem; line-height: 1; }
.cb-highlight .cb-body { flex: 1 1 200px; min-width: 0; }
.cb-highlight .cb-body p { color: var(--cb-ink); font-weight: 500; }

/* ═══════════ 11. Stat — dark in BOTH themes, gradient-clipped number ═══════════
   Shape: --cb-ts-b, the flagship display gets the full panel flourish. */

.cb-stat {
	--cb-muted: #A6B2C2;
	text-align: center;
	border-radius: var(--cb-ts-l) 0 var(--cb-ts-l) 0;
	background-image: linear-gradient(135deg, #0B0F14 0%, #002B7A 100%);
	color: #F1F5F9;
	padding-block: 22px;
}

.cb-stat-big {
	margin-block-end: 6px;
	font-family: var(--cb-font-mono);
	font-size: clamp(2.4rem, 9vw, 3rem);
	font-weight: 800;
	line-height: 1;
	/* v2.1 canonical .rf-text-gradient recipe — but NOT the raw primary
	   gradient: per SYSTEM/01_SYSTEM.md's own gradient-as-text rule, the
	   primary's blue stop (#0057FF) measures ~2.4:1 against this card's
	   dark-blue background, well under AA. Text gets its own light-tint
	   ramp instead (cyan seed -> blue-200), verified >=6:1 at both stops
	   against both ends of the card's background gradient. */
	background-image: linear-gradient(45deg, #00E5CC 0%, #8FB5FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.cb-stat .cb-body p { color: var(--cb-muted); font-size: .9375rem; }

/* ═══════════ 12. Terminal — dark in BOTH themes ═══════════
   Shape: --cb-ts-s — tight, code-like corners (deliberately NOT a tension
   flourish; a terminal window reads as utility chrome, not an editorial card). */

.cb-terminal {
	--cb-accent: #00E5CC; /* literal brand cyan — ties to the checklist/stat "technical" thread */
	background-color: #0D1117;
	border: 1px solid #21262D;
	border-radius: var(--cb-ts-s);
}

.cb-term-dots { display: flex; gap: 5px; margin-block-end: 12px; }
.cb-dot { width: 10px; height: 10px; border-radius: 50%; }
.cb-dot.r { background-color: #FF5F57; }
.cb-dot.y { background-color: #FFBD2E; }
.cb-dot.g { background-color: #28C840; }

.cb-terminal .cb-head { font-size: .8125rem; letter-spacing: .05em; }

.cb-term-pre {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--cb-font-mono);
	font-size: .875rem;
	line-height: 1.7;
	color: #E6EDF3;
	white-space: pre-wrap;
	overflow-x: auto;
}

/* ═══════════ 13. Pro tip — badge ═══════════
   Shape: --cb-ts-l uniform for the card, --cb-ts-full for the pill badge
   (unchanged — already an exact tension-system value). */

.cb-protip {
	position: relative;
	margin-block-start: 1.8em;
	background-color: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-ts-l);
}

.cb-protip-badge {
	position: absolute;
	inset-block-start: -12px;
	inset-inline-end: 20px;
	padding: 3px 10px;
	border-radius: var(--cb-ts-full);
	/* literal v2.1 --rf-gradient-cta */
	background-image: linear-gradient(45deg, #00776B 0%, #0044C7 100%);
	color: #FFFFFF;
	font-family: var(--cb-font-mono);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ═══════════ 14. Checklist ═══════════ */

.cb-checklist {
	background-color: var(--cb-surface-plain);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-ts-m);
}

.cb-checklist .cb-head { color: var(--cb-ink); margin-block-end: 12px; }

.cb-check-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-check-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cb-muted);
	list-style: none;
}

.cb-ck {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: var(--cb-ts-s);
	/* literal --rf-cyan-600 — a surface fill, not text, so the ramp tier is correct here */
	background-color: #00B3A0;
}

.cb-ck svg { width: 11px; height: 11px; }

/* ═══════════ 15. Gradient border — literal v2.1 primary gradient ═══════════
   v2.1 moved purple out of the primary gradient (now cyan→blue only, 45deg);
   the old file still used the retired v2.0 three-stop tricolor. */

.cb-grad-wrap {
	margin-block: 1.5em;
	padding: 2px;
	border-radius: var(--cb-ts-l) 0 var(--cb-ts-l) 0;
	/* literal v2.1 --rf-gradient */
	background-image: linear-gradient(45deg, #00E5CC 0%, #0057FF 100%);
}

.cb-gradient {
	margin: 0;
	background-color: var(--cb-surface);
	border-radius: calc(var(--cb-ts-l) - 2px) 0 calc(var(--cb-ts-l) - 2px) 0;
}

.cb-gradient .cb-head { color: var(--cb-ink); }

.cb-grad-flash {
	/* NOT the literal --rf-gradient-90: per SYSTEM/01_SYSTEM.md, the
	   primary gradient fails as text in dark mode (~3.2:1 at the blue
	   stop against this card's --cb-surface). Dark theme takes a
	   light-tint ramp instead (cyan seed -> blue-200, both >=8:1 here);
	   light theme already used the AA-safe --rf-gradient-cta-family
	   shades below, unchanged. */
	background-image: linear-gradient(90deg, #00E5CC 0%, #8FB5FF 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: 700;
}

[data-rf-theme="light"] .cb-grad-flash {
	background-image: linear-gradient(90deg, #006E63, #0044C7);
}

/* ═══════════ 16. Minimal blockquote — "Editorial" voice register (cyan) ═══════════
   Shape: sharp (0) — text-first, no card chrome. */

.cb-minimal {
	padding: 6px 18px;
	background: transparent;
	border-inline-start: 3px solid rgba(0, 229, 204, .45);
}

[data-rf-theme="light"] .cb-minimal { border-inline-start-color: rgba(0, 110, 99, .40); }

.cb-minimal .cb-body p {
	font-size: 1.0625rem;
	line-height: 1.7;
	font-style: italic;
	color: var(--cb-ink);
}

.cb-minimal cite {
	display: block;
	margin-block-start: 8px;
	font-size: .8125rem;
	font-style: normal;
	color: var(--cb-meta);
}

/* ═══════════ 17. Neon — dark in BOTH themes, literal brand cyan glow ═══════════ */

.cb-neon {
	--cb-accent: #00E5CC; /* literal brand cyan — was an off-brand Tailwind cyan */
	background-color: #030712;
	border: 1px solid rgba(0, 229, 204, .30);
	border-radius: var(--cb-ts-m);
	box-shadow: 0 0 20px rgba(0, 229, 204, .16), inset 0 0 20px rgba(0, 229, 204, .04);
}

.cb-neon .cb-head { letter-spacing: .06em; font-size: .8125rem; text-transform: uppercase; }
.cb-neon .cb-body p { color: #7FF5E6; /* literal --rf-cyan-200 */ line-height: 1.7; }

/* ═══════════ 18. Emoji callout ═══════════
   Shape: --cb-ts-b, matching .cb-tip/.cb-dark's panel treatment. */

.cb-emoji {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
	background-color: var(--cb-surface);
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-ts-l) 0 var(--cb-ts-l) 0;
	box-shadow: var(--cb-elev-lg);
}

.cb-emoji-icon { flex-shrink: 0; font-size: 2.2rem; line-height: 1; }
.cb-emoji-content { flex: 1 1 200px; min-width: 0; }
.cb-emoji-title { margin-block-end: 5px; font-weight: 700; color: var(--cb-ink); }

/* ═══════════ Block-editor canvas (Gutenberg iframe) ═══════════
   Same class contract as the front end (`.cb`/`.cb-<type>`/...), so the
   editor preview is the real thing, not an approximation. Only addition:
   a little breathing room so InnerBlocks placeholder text doesn't collide
   with the box chrome, and a visible (but unobtrusive) outline on the
   empty InnerBlocks area before the editor has content. */

.editor-styles-wrapper .cb { margin-block: 1em; }
.cb .block-editor-inner-blocks .block-editor-block-list__layout {
	min-height: 1.2em;
}

/* The on-canvas "סוג התיבה" (box type) picker — deliberately loud/obvious
   (dashed outline, labeled) so it reads as an editing control sitting on
   top of the block, not as printed content; found necessary after a real
   editor inserted the block and couldn't find where to change the type
   (it was sidebar-only at first). Editor-only — never appears on the
   front end, since it's rendered in edit() only, not save(). */
.cb-block-type-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 8px;
	padding: 8px 12px;
	background-color: var(--cb-surface-plain);
	border: 1px dashed var(--cb-line-strong);
	border-radius: var(--cb-ts-s);
}

.cb-block-type-bar-label {
	flex-shrink: 0;
	font-family: var(--cb-font-mono);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--cb-ink);
}

.cb-block-type-bar .components-select-control__input {
	font-family: var(--cb-font);
}

/* ═══════════ Narrow viewports (<=480px) — row-under-row reflow, SYSTEM.md §4 ═══════════ */

@media (max-width: 480px) {
	.cb-step, .cb-highlight, .cb-emoji { gap: 10px; }
	.cb-step-content, .cb-emoji-content, .cb-highlight .cb-body { flex-basis: 100%; }
	.cb-quote::before { font-size: 3.2rem; }
}

/* ═══════════ Roomier from tablet up (mobile-first base above) ═══════════ */

@media (min-width: 601px) {
	.cb {
		--cb-pad-b: 18px;
		--cb-pad-i: 22px;
	}

	.cb-quote { padding-block: 26px; }
	.cb-stat { padding-block: 26px; }
	.cb-quote blockquote { font-size: 1.25rem; }
}

/* ═══════════ Reduced motion ═══════════ */

@media (prefers-reduced-motion: reduce) {
	.cb, .cb * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}