/* ============================================================
   Senzing Cookbook — component styles, V2
   Obsidian & Ember, tokens copied 1:1 from
   From Boss/senzing-rebuild-package/css/senzing-tokens.css and
   validated against butcher-site-design/v2/recipe.html +
   catalog.html (see DESIGN-NOTES.md).

   V1 -> V2 corrections: no teal in the real token set (dropped
   entirely); light-mode ink is --light-text #1A1614, not
   #251E1A; signal green (#00FC88) is RESTRICTED to two small-dot
   uses only (Expected-outcome dot, Verified-status dot) — never
   a fill, never body text, never decorative.

   Everything is scoped under .szc-cb (every shortcode's own root
   element carries this class). Tokens are custom properties
   declared ON EACH .szc-cb ROOT, never on :root, so nothing here
   can bleed site-wide and the plugin works standalone on any
   theme. No bare element selectors — every rule is qualified by
   a .szc-* class.
   ============================================================ */

.szc-cb {
	--szc-obsidian:   #0F0D0C;
	--szc-deep:       #1A1614;
	--szc-card:       #251E1A;
	--szc-border-dark:#2E2520;

	--szc-ember-hot:  #FF4E1F;
	--szc-ember-mid:  #E8640A;
	--szc-ember-warm: #F0920A;
	--szc-ember-core: #C03A10;
	--szc-grad:       linear-gradient(90deg, #FF4E1F 0%, #E8640A 45%, #F0920A 100%);
	--szc-grad-diag:  linear-gradient(135deg, #FF4E1F 0%, #F0920A 100%);

	/* RESTRICTED — live/resolved/match indicators only. Two disciplined
	   uses in this plugin: the Expected-outcome pulsing dot, and the
	   catalog card's Verified-status dot. Never a fill, body text, or
	   decorative color. */
	--szc-signal:     #00FC88;

	--szc-text:       #E8E2DC;
	--szc-muted:      #B0A49E;
	--szc-white:      #FFFFFF;

	--szc-light-bg:            #FFFFFF;
	--szc-light-surface:       #F7F5F2;
	--szc-light-border:        #DDD8D3;
	--szc-light-border-strong: #E0DBD6;
	--szc-light-text:          #1A1614;
	--szc-light-body:          #555555;
	--szc-light-meta:          #9E8E80;

	--szc-radius-sm:   4px;
	--szc-radius-md:   8px;
	--szc-radius-lg:   10px;
	--szc-radius-xl:   12px;
	--szc-radius-pill: 100px;

	--szc-shadow-card:  0 4px 24px rgba(0,0,0,0.2);
	--szc-shadow-light: 0 2px 16px rgba(0,0,0,0.06);

	--szc-font:         'Helvetica Neue', Helvetica, Arial, sans-serif;
	--szc-font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--szc-font-mono:    'Roboto Mono', 'SF Mono', 'Fira Code', monospace;

	--szc-max-content: 1200px;

	font-family: var(--szc-font);
	color: var(--szc-light-body);
	line-height: 1.6;
	box-sizing: border-box;
}

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

.szc-cb h1, .szc-cb h2, .szc-cb h3, .szc-cb h4 {
	font-family: var(--szc-font-heading);
	line-height: 1.2;
}

.szc-cb a { text-decoration: none; color: inherit; }
.szc-cb ul, .szc-cb ol { list-style: revert; }
.szc-cb img { max-width: 100%; }

.szc-cb .szc-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------
   Shared: section label (eyebrow), gradient text, generic section
   ------------------------------------------------------------ */

.szc-cb .szc-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--szc-ember-hot);
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.szc-cb .szc-section-label::after {
	content: '';
	display: block;
	height: 1px;
	width: 32px;
	background: var(--szc-ember-hot);
	flex-shrink: 0;
}
.szc-cb .szc-section-label--light { color: var(--szc-ember-core); }
.szc-cb .szc-section-label--light::after { background: var(--szc-ember-core); }

.szc-cb .szc-grad-text {
	background: var(--szc-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.szc-cb .szc-generic-section { margin: 0 0 48px; }
.szc-cb .szc-generic-section:last-child { margin-bottom: 0; }
.szc-cb .szc-section-title {
	font-size: 22px;
	font-weight: 500;
	color: var(--szc-light-text);
	margin: 0 0 20px;
}

.szc-cb p.szc-intro {
	font-size: 17px;
	color: var(--szc-light-body);
	line-height: 1.7;
	margin: 0 0 40px;
	max-width: 720px;
}
.szc-cb p.szc-intro em { font-style: italic; }

/* ------------------------------------------------------------
   [szc_prompt] — dark obsidian code block + Copy button
   ------------------------------------------------------------ */

.szc-cb.szc-prompt { margin: 0 0 22px; }

.szc-cb .szc-prompt-title {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--szc-light-meta);
	margin-bottom: 8px;
}

.szc-cb .szc-prompt-box {
	position: relative;
	background: var(--szc-obsidian);
	border: 1px solid var(--szc-border-dark);
	border-radius: var(--szc-radius-lg);
	padding: 20px 22px;
	box-shadow: var(--szc-shadow-card);
}

.szc-cb .szc-prompt-copy {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--szc-font);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--szc-muted);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--szc-radius-sm);
	padding: 6px 12px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.szc-cb .szc-prompt-copy:hover,
.szc-cb .szc-prompt-copy:focus-visible {
	background: rgba(255,255,255,.13);
	color: var(--szc-white);
	border-color: rgba(255,255,255,.28);
}
.szc-cb .szc-prompt-copy:focus-visible {
	outline: 2px solid var(--szc-ember-hot);
	outline-offset: 2px;
}
.szc-cb .szc-prompt-copy.is-copied {
	background: rgba(255,78,31,.14);
	color: var(--szc-ember-hot);
	border-color: rgba(255,78,31,.35);
}
.szc-cb .szc-prompt-copy.is-failed {
	background: rgba(255,78,31,.12);
	color: var(--szc-ember-hot);
	border-color: rgba(255,78,31,.4);
}

.szc-cb .szc-prompt-code {
	margin: 0;
	padding-right: 84px;
	font-family: var(--szc-font-mono);
	font-size: 13px;
	line-height: 1.75;
	color: var(--szc-text);
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.szc-cb .szc-prompt-code code {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	padding: 0;
	display: block;
}

/* ------------------------------------------------------------
   [szc_outcome] / [szc_questions] — callouts
   ------------------------------------------------------------ */

.szc-cb.szc-callout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: var(--szc-radius-md);
	padding: 16px 20px;
	margin: 0 0 22px;
}

.szc-cb .szc-callout-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 5px;
}
.szc-cb .szc-callout-content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--szc-light-body);
}
.szc-cb .szc-callout-content > *:last-child { margin-bottom: 0; }
.szc-cb .szc-callout-content strong { color: var(--szc-light-text); font-weight: 600; }

/* Outcome: the one deliberate, disciplined use of signal green — a small
   pulsing dot, never a fill, never body text. */
.szc-cb.szc-outcome {
	background: var(--szc-light-surface);
	border: 1px solid var(--szc-light-border);
	align-items: flex-start;
	padding-top: 16px;
}
.szc-cb.szc-outcome::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--szc-signal);
	margin-top: 6px;
	flex-shrink: 0;
	animation: szc-pulse-signal 1.8s ease-in-out infinite;
}
@keyframes szc-pulse-signal {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,252,136,.5); }
	50%      { opacity: .85; box-shadow: 0 0 0 5px rgba(0,252,136,0); }
}
.szc-cb.szc-outcome .szc-callout-label { color: var(--szc-ember-core); }

.szc-cb.szc-questions {
	background: var(--szc-light-bg);
	border: 1px solid var(--szc-light-border);
}
.szc-cb.szc-questions .szc-callout-label { color: var(--szc-light-meta); }
.szc-cb .szc-qa-source-list { list-style: none; margin: 0; padding: 0; }
.szc-cb .szc-qa-source-list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--szc-light-border);
	font-size: 14px;
	line-height: 1.65;
	color: var(--szc-light-body);
}
.szc-cb .szc-qa-source-list li:last-child { border-bottom: none; }
.szc-cb .szc-qa-source-list li em {
	font-style: italic;
	color: var(--szc-light-text);
}

/* ------------------------------------------------------------
   [szc_chef] — "From the chef — {name}"
   ------------------------------------------------------------ */

.szc-cb .szc-chef-card {
	display: flex;
	gap: 18px;
	background: var(--szc-light-bg);
	border: 1px solid var(--szc-light-border);
	border-radius: var(--szc-radius-lg);
	padding: 28px 30px;
	box-shadow: var(--szc-shadow-light);
}
.szc-cb .szc-chef-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--szc-grad-diag);
	color: var(--szc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}
.szc-cb .szc-chef-body { font-size: 15px; color: var(--szc-light-body); line-height: 1.8; }
.szc-cb .szc-chef-body strong { color: var(--szc-light-text); font-weight: 600; }
.szc-cb .szc-chef-body em { color: var(--szc-ember-core); font-style: italic; }
.szc-cb .szc-chef-body blockquote {
	margin: 14px 0 0;
	padding: 12px 18px;
	border-left: 3px solid var(--szc-light-border);
	background: var(--szc-light-surface);
	border-radius: 0 var(--szc-radius-sm) var(--szc-radius-sm) 0;
}
.szc-cb .szc-chef-body > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   "What you'll need" — labeled rows
   ------------------------------------------------------------ */

.szc-cb .szc-need-list {
	background: var(--szc-light-surface);
	border: 1px solid var(--szc-light-border);
	border-radius: var(--szc-radius-lg);
	overflow: hidden;
}
.szc-cb .szc-need-row {
	display: flex;
	gap: 16px;
	padding: 20px 26px;
	border-bottom: 1px solid var(--szc-light-border);
}
.szc-cb .szc-need-row:last-child { border-bottom: none; }
.szc-cb .szc-need-label {
	width: 108px;
	flex-shrink: 0;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--szc-light-meta);
	padding-top: 2px;
}
.szc-cb .szc-need-body { flex: 1; font-size: 14.5px; color: var(--szc-light-body); line-height: 1.7; }
.szc-cb .szc-need-body strong { color: var(--szc-light-text); font-weight: 600; }
.szc-cb .szc-need-body a { color: var(--szc-ember-core); font-weight: 600; }
.szc-cb .szc-need-body a:hover { text-decoration: underline; }
.szc-cb .szc-need-body em { color: var(--szc-light-meta); font-style: italic; }
.szc-cb .szc-need-body code {
	font-family: var(--szc-font-mono);
	font-size: 12.5px;
	background: rgba(255,78,31,.08);
	border: 1px solid rgba(255,78,31,.18);
	border-radius: 4px;
	padding: 2px 7px;
	color: var(--szc-ember-core);
}

/* ------------------------------------------------------------
   [szc_step] — numbered step
   ------------------------------------------------------------ */

.szc-cb.szc-step { margin: 0 0 64px; }
.szc-cb.szc-step:last-child { margin-bottom: 0; }

.szc-cb .szc-step-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.szc-cb .szc-step-num {
	font-family: var(--szc-font-heading);
	font-size: 46px;
	font-weight: 700;
	color: var(--szc-light-border);
	line-height: 1;
	letter-spacing: -.02em;
	flex-shrink: 0;
	width: 58px;
}
.szc-cb .szc-step-head-text { padding-top: 4px; }
.szc-cb .szc-step-title { font-size: 25px; font-weight: 500; color: var(--szc-light-text); margin: 0 0 4px; }
.szc-cb .szc-step-time { font-size: 13px; color: var(--szc-light-meta); font-style: italic; }

.szc-cb .szc-step-body { margin-left: 78px; font-size: 15px; color: var(--szc-light-body); line-height: 1.8; }
.szc-cb .szc-step-body > p { margin: 0 0 18px; }
.szc-cb .szc-step-body code {
	font-family: var(--szc-font-mono);
	font-size: 12.5px;
	background: rgba(255,78,31,.08);
	border: 1px solid rgba(255,78,31,.18);
	border-radius: 4px;
	padding: 2px 7px;
	color: var(--szc-ember-core);
}
@media (max-width: 700px) { .szc-cb .szc-step-body { margin-left: 0; } }

/* ------------------------------------------------------------
   "Optional refinements" — Garnish / Season two-card comparison
   ------------------------------------------------------------ */

.szc-cb .szc-refine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.szc-cb .szc-refine-card { background: var(--szc-light-bg); border-radius: var(--szc-radius-lg); padding: 30px 30px; border: 1px solid; }
.szc-cb .szc-refine-card--ember { border-color: rgba(255,78,31,.28); }
.szc-cb .szc-refine-card--amber { border-color: rgba(240,146,10,.32); }
.szc-cb .szc-refine-card h3 { font-size: 18px; color: var(--szc-light-text); letter-spacing: -.01em; margin: 0 0 10px; }
.szc-cb .szc-refine-card p { font-size: 14px; color: var(--szc-light-body); line-height: 1.75; margin: 0; }
.szc-cb .szc-refine-card p strong { color: var(--szc-light-text); font-weight: 600; }
.szc-cb .szc-refine-card p em { color: var(--szc-light-meta); font-style: italic; }

.szc-cb .szc-pill {
	display: inline-block;
	padding: 4px 14px;
	border-radius: var(--szc-radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.szc-cb .szc-pill--ember { background: rgba(255,78,31,.1); color: var(--szc-ember-core); }
.szc-cb .szc-pill--amber { background: rgba(240,146,10,.12); color: #8A5C00; }

@media (max-width: 760px) { .szc-cb .szc-refine-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Badge row — [szc_recipe_meta] / template title band
   ------------------------------------------------------------ */

.szc-cb.szc-recipe-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

.szc-cb .szc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--szc-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	padding: 6px 13px;
	border-radius: var(--szc-radius-pill);
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}
.szc-cb .szc-badge--outline { background: var(--szc-light-bg); color: var(--szc-light-text); border-color: var(--szc-light-border); }
.szc-cb .szc-badge--muted   { background: transparent; color: var(--szc-light-meta); border-color: var(--szc-light-border); }
.szc-cb .szc-badge--faint   { background: transparent; color: var(--szc-light-meta); border-color: var(--szc-light-border); opacity: .8; }
.szc-cb a.szc-badge--link   { background: var(--szc-light-bg); color: var(--szc-light-text); border-color: var(--szc-light-border); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.szc-cb a.szc-badge--link:hover { background: rgba(255,78,31,.08); color: var(--szc-ember-core); border-color: rgba(255,78,31,.3); }

.szc-cb .szc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.szc-cb .szc-dot--easy         { background: var(--szc-light-meta); }
.szc-cb .szc-dot--intermediate { background: var(--szc-ember-warm); }
.szc-cb .szc-dot--advanced     { background: var(--szc-ember-hot); }
.szc-cb .szc-dot--signal       { background: var(--szc-signal); box-shadow: 0 0 0 3px rgba(0,252,136,.18); }

/* Dark variant — used in the title band, on the obsidian/deep surface */
.szc-cb .szc-recipe-meta--dark .szc-badge,
.szc-cb .szc-recipe-meta--dark a.szc-badge--link {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	color: var(--szc-text);
}
.szc-cb .szc-recipe-meta--dark a.szc-badge--link:hover {
	background: rgba(255,78,31,.12);
	color: var(--szc-white);
	border-color: rgba(255,78,31,.4);
}
.szc-cb .szc-recipe-meta--dark .szc-dot--easy { background: var(--szc-muted); }

/* ------------------------------------------------------------
   [szc_video] — demo video block (in-body use)
   ------------------------------------------------------------ */

.szc-cb.szc-video { margin: 0 0 24px; }
.szc-cb .szc-video-label { font-size: 12px; letter-spacing: .06em; color: var(--szc-ember-core); margin-bottom: 8px; font-style: italic; }

.szc-cb.szc-video--youtube .szc-video-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--szc-obsidian);
	border: none;
	border-radius: var(--szc-radius-lg);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
}
.szc-cb.szc-video--youtube .szc-video-facade::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(15,13,12,.28);
	transition: background .15s ease;
}
.szc-cb.szc-video--youtube .szc-video-facade:hover::after { background: rgba(15,13,12,.42); }

.szc-cb .szc-video-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 62px; height: 62px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	border: 1.5px solid rgba(255,255,255,.5);
	z-index: 1;
}
.szc-cb .szc-video-play::before {
	content: '';
	position: absolute; top: 50%; left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent var(--szc-white);
}
.szc-cb .szc-video-play--static { position: static; transform: none; flex-shrink: 0; background: rgba(255,78,31,.1); border-color: rgba(255,78,31,.35); }
.szc-cb .szc-video-play--static::before { border-color: transparent transparent transparent var(--szc-ember-core); }

.szc-cb .szc-video-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--szc-radius-lg); display: block; }

.szc-cb.szc-video--link .szc-video-link-card {
	display: flex; align-items: center; gap: 18px;
	background: var(--szc-card);
	border: 1px solid var(--szc-border-dark);
	border-radius: var(--szc-radius-lg);
	padding: 20px 24px;
	text-decoration: none;
	transition: background .15s ease;
}
.szc-cb.szc-video--link .szc-video-link-card:hover { background: #34291f; }
.szc-cb.szc-video--link .szc-video-play--static { width: 44px; height: 44px; position: relative; }
.szc-cb.szc-video--link .szc-video-play--static::before { border-width: 8px 0 8px 13px; }
.szc-cb .szc-video-link-text { display: flex; flex-direction: column; gap: 4px; }
.szc-cb.szc-video--link .szc-video-label { color: var(--szc-text); font-style: normal; font-size: 14px; margin-bottom: 0; }
.szc-cb .szc-video-link-sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--szc-muted); }

/* Ghost button (title band) + reveal panel */
.szc-cb .szc-btn-ghost {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 26px;
	background: transparent;
	color: var(--szc-white);
	font-family: var(--szc-font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	border: 1.5px solid rgba(255,255,255,.25);
	border-radius: var(--szc-radius-sm);
	cursor: pointer;
	transition: border-color .2s, background .2s, transform .2s;
	white-space: nowrap;
}
.szc-cb .szc-btn-ghost:hover { border-color: var(--szc-ember-hot); background: rgba(255,78,31,.06); transform: translateY(-1px); }
.szc-cb .szc-video-optional-note { display: block; margin-top: 8px; font-size: 12px; color: var(--szc-muted); max-width: 220px; line-height: 1.5; }

/* ------------------------------------------------------------
   YouTube lightbox — built entirely by szc-recipe.js on first open
   (openYoutubeLightbox()); no server-rendered markup exists until a
   visitor actually clicks. Shared by [szc_video]'s facade and the
   title-band "▶ Watch the demo" ghost button.
   ------------------------------------------------------------ */

.szc-cb.szc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15,13,12,.86);
}
.szc-cb.szc-lightbox[hidden] { display: none; }

.szc-cb .szc-lightbox-dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
	outline: none;
}

.szc-cb .szc-lightbox-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--szc-obsidian);
	border-radius: var(--szc-radius-lg);
	overflow: hidden;
	box-shadow: var(--szc-shadow-card);
}
.szc-cb .szc-lightbox-frame iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.szc-cb .szc-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	color: var(--szc-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.szc-cb .szc-lightbox-close:hover,
.szc-cb .szc-lightbox-close:focus-visible {
	background: var(--szc-ember-hot);
	border-color: var(--szc-ember-hot);
	color: var(--szc-white);
}
.szc-cb .szc-lightbox-close:focus-visible { outline: 2px solid var(--szc-ember-hot); outline-offset: 2px; }

/* Deliberate, narrow exception to the "everything under .szc-cb" scoping
   rule: a single JS-toggled class on <body> to lock background scroll
   while the lightbox is open. Self-contained (added/removed only by
   openYoutubeLightbox()/closeLightbox()) and has zero effect when the
   lightbox isn't open. */
body.szc-lightbox-open { overflow: hidden !important; }

@media (max-width: 640px) {
	.szc-cb .szc-lightbox-close { top: -40px; width: 32px; height: 32px; font-size: 18px; }
}

/* ------------------------------------------------------------
   Title band (V2 recipe/catalog dark page header)
   ------------------------------------------------------------ */

.szc-cb.szc-title-band { background: var(--szc-deep); border-bottom: 1px solid var(--szc-border-dark); padding: 40px 40px 56px; }
.szc-cb .szc-title-band-inner { max-width: var(--szc-max-content); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.szc-cb .szc-title-band-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.szc-cb .szc-title-band-text { max-width: 700px; }
.szc-cb .szc-recipe-title {
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--szc-white);
	margin: 14px 0 14px;
}
.szc-cb .szc-title-band-excerpt { font-size: 16px; color: var(--szc-muted); line-height: 1.7; max-width: 620px; margin: 0 0 6px; }
.szc-cb .szc-title-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex-shrink: 0; }

/* ------------------------------------------------------------
   "First time?" notice — auto-inserted on every Recipe page, above
   the two-column layout (matches the one already live on the
   catalog page). Plain <div>s only (no <section>, no <code>) —
   the THEME FIREWALL's section/code rules have nothing to fight
   here by construction.
   ------------------------------------------------------------ */

.szc-cb.szc-first-time-wrap { max-width: var(--szc-max-content); margin: 0 auto; padding: 32px 40px 0; }

.szc-cb .szc-first-time-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	background: rgba(255,78,31,.06);
	border: 1px solid rgba(255,78,31,.24);
	border-radius: var(--szc-radius-lg);
	padding: 18px 24px;
}

.szc-cb .szc-first-time-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,78,31,.14);
	color: var(--szc-ember-core);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}

.szc-cb .szc-first-time-text {
	flex: 1 1 240px;
	margin: 0;
	font-size: 14px;
	color: var(--szc-light-body);
	line-height: 1.6;
}
.szc-cb .szc-first-time-text strong { color: var(--szc-light-text); font-weight: 600; }

.szc-cb .szc-first-time-cta {
	display: inline-block;
	flex-shrink: 0;
	background: linear-gradient(90deg, #FF4E1F, #F0920A);
	color: var(--szc-white);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 26px;
	border-radius: var(--szc-radius-md);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s ease, transform .15s ease;
}
.szc-cb .szc-first-time-cta:hover,
.szc-cb .szc-first-time-cta:focus-visible { opacity: .9; transform: translateY(-1px); }
.szc-cb .szc-first-time-cta:focus-visible { outline: 2px solid var(--szc-ember-core); outline-offset: 2px; }

/* ------------------------------------------------------------
   Recipe layout — two-column with sticky "On this page" TOC
   ------------------------------------------------------------ */

.szc-cb.szc-recipe-layout {
	max-width: var(--szc-max-content);
	margin: 0 auto;
	padding: 64px 40px;
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 64px;
	align-items: start;
}
.szc-cb .szc-recipe-main > * { max-width: 100%; }

.szc-cb .szc-recipe-toc { position: sticky; top: 24px; }
.szc-cb .szc-toc-card { background: var(--szc-light-bg); border: 1px solid var(--szc-light-border); border-radius: var(--szc-radius-lg); padding: 22px 22px 10px; box-shadow: var(--szc-shadow-light); }
.szc-cb .szc-toc-card .szc-section-label { margin-bottom: 16px; display: flex; }
.szc-cb .szc-toc-list { list-style: none; margin: 0; padding: 0; }
.szc-cb .szc-toc-list li { margin-bottom: 2px; }
.szc-cb .szc-toc-list li a {
	display: block;
	padding: 9px 10px;
	border-radius: var(--szc-radius-sm);
	font-size: 13px;
	color: var(--szc-light-body);
	border-left: 2px solid transparent;
	transition: color .15s, background .15s, border-color .15s;
}
.szc-cb .szc-toc-list li a:hover { color: var(--szc-light-text); background: var(--szc-light-surface); }
.szc-cb .szc-toc-list li a.szc-active { color: var(--szc-ember-core); border-left-color: var(--szc-ember-hot); background: rgba(255,78,31,.05); font-weight: 600; }

@media (max-width: 960px) {
	.szc-cb.szc-recipe-layout { grid-template-columns: 1fr; }
	.szc-cb .szc-recipe-toc { position: static; order: -1; margin-bottom: 8px; }
	.szc-cb .szc-toc-list { display: flex; flex-wrap: wrap; gap: 4px; }
	.szc-cb .szc-toc-list li a { padding: 7px 12px; }
}

/* ------------------------------------------------------------
   [szc_recipe_grid] — catalog: filter bar + cards
   ------------------------------------------------------------ */

.szc-cb.szc-recipe-grid-empty { color: var(--szc-light-meta); font-style: italic; }

.szc-cb .szc-filter-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
	background: var(--szc-light-bg);
	border: 1px solid var(--szc-light-border);
	border-radius: var(--szc-radius-pill);
	padding: 10px 12px;
	margin: 0 0 24px;
}
.szc-cb .szc-filter-group-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--szc-light-meta); margin: 0 2px 0 6px; font-weight: 700; }
.szc-cb .szc-filter-sep { width: 1px; height: 20px; background: var(--szc-light-border); margin: 0 6px; flex-shrink: 0; }

.szc-cb .szc-chip {
	font-family: var(--szc-font);
	font-size: 12.5px;
	padding: 7px 14px;
	border-radius: var(--szc-radius-pill);
	border: 1px solid var(--szc-light-border);
	background: var(--szc-light-bg);
	color: var(--szc-light-body);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.szc-cb .szc-chip:hover { border-color: var(--szc-ember-hot); }
.szc-cb .szc-chip.szc-chip--active { background: var(--szc-light-text); color: var(--szc-white); border-color: var(--szc-light-text); }

.szc-cb .szc-recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.szc-cb .szc-recipe-card {
	background: var(--szc-light-bg);
	border: 1px solid var(--szc-light-border);
	border-radius: var(--szc-radius-lg);
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--szc-shadow-light);
	transition: border-color .15s ease, transform .15s ease;
}
.szc-cb .szc-recipe-card:hover { border-color: var(--szc-ember-hot); transform: translateY(-2px); }
.szc-cb .szc-recipe-card[hidden] { display: none; }

.szc-cb .szc-recipe-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.szc-cb .szc-recipe-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; line-height: 1.25; color: var(--szc-light-text); }
.szc-cb .szc-recipe-card h3 a:hover { color: var(--szc-ember-core); }
.szc-cb .szc-recipe-chef { font-size: 12.5px; color: var(--szc-light-meta); margin-bottom: 14px; }

.szc-cb .szc-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--szc-light-meta); white-space: nowrap; flex-shrink: 0; }
.szc-cb .szc-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.szc-cb .szc-status-pill--verified .szc-status-dot { background: var(--szc-signal); box-shadow: 0 0 0 3px rgba(0,252,136,.18); }
.szc-cb .szc-status-pill--draft .szc-status-dot { background: var(--szc-ember-warm); }

.szc-cb .szc-badge-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.szc-cb .szc-badge-row .szc-badge { background: var(--szc-light-surface); border-color: var(--szc-light-border); }

.szc-cb .szc-recipe-makes { font-size: 13.5px; color: var(--szc-light-body); line-height: 1.65; padding-top: 14px; border-top: 1px solid var(--szc-light-border); margin-top: auto; }
.szc-cb .szc-recipe-makes-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--szc-light-meta); display: block; margin-bottom: 6px; font-weight: 700; }

@media (max-width: 900px) { .szc-cb .szc-recipe-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   [szc_recipe_files] — compact download rows, embedded right under
   "What you'll need" (see SZC_Importer::inject_files_shortcode()).
   Deliberately NOT a section: no heading, no .szc-generic-section,
   no TOC participation — reads as one more ingredient row.
   ------------------------------------------------------------ */

.szc-cb .szc-files-compact { margin: 10px 0 44px; }

.szc-cb .szc-files-kicker {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--szc-light-meta);
	margin: 0 0 8px;
}

.szc-cb .szc-files-compact-list { display: flex; flex-direction: column; gap: 6px; }

.szc-cb .szc-files-compact-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 9px 12px;
	background: var(--szc-light-surface);
	border: 1px solid var(--szc-light-border);
	border-radius: var(--szc-radius-sm);
	font-size: 12.5px;
}

.szc-cb .szc-files-compact-row .szc-files-name {
	flex: 1 1 auto;
	min-width: 120px;
	overflow-wrap: anywhere;
}

.szc-cb .szc-file-type {
	display: inline-flex;
	align-items: center;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--szc-light-meta);
	background: var(--szc-light-bg);
	border: 1px solid var(--szc-light-border);
	border-radius: 4px;
	padding: 2px 6px;
	flex-shrink: 0;
}

.szc-cb .szc-files-compact-row .szc-files-size {
	font-size: 11.5px;
	color: var(--szc-light-meta);
	white-space: nowrap;
	flex-shrink: 0;
}

.szc-cb .szc-files-download-sm {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-family: var(--szc-font);
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: var(--szc-radius-pill);
	background: transparent;
	color: var(--szc-ember-core);
	border: 1px solid rgba(255,78,31,.3);
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.szc-cb .szc-files-download-sm:hover,
.szc-cb .szc-files-download-sm:focus-visible {
	background: rgba(255,78,31,.1);
	color: var(--szc-ember-hot);
	border-color: var(--szc-ember-hot);
}
.szc-cb .szc-files-download-sm:focus-visible { outline: 2px solid var(--szc-ember-hot); outline-offset: 2px; }

/* ------------------------------------------------------------
   Responsive — title band / recipe layout
   ------------------------------------------------------------ */

@media (max-width: 640px) {
	.szc-cb.szc-title-band { padding: 28px 20px 40px; }
	.szc-cb.szc-first-time-wrap { padding: 24px 20px 0; }
	.szc-cb .szc-first-time-notice { padding: 16px 18px; }
	.szc-cb.szc-recipe-layout { padding: 40px 20px; }
	.szc-cb .szc-prompt-box { padding: 46px 16px 16px; }
	.szc-cb .szc-prompt-copy { top: 10px; right: 10px; left: 10px; justify-content: center; }
	.szc-cb .szc-prompt-code { padding-right: 0; }
	.szc-cb.szc-callout { flex-direction: column; gap: 10px; }
	.szc-cb.szc-outcome::before { margin-top: 0; }
	.szc-cb .szc-step-num { font-size: 32px; }
	.szc-cb .szc-need-row { flex-direction: column; gap: 6px; }
	.szc-cb .szc-need-label { width: auto; }
	.szc-cb .szc-files-compact-row { justify-content: space-between; }
	.szc-cb .szc-files-download-sm { margin-left: auto; }
}

/* ============================================================
   WPBAKERY STRUCTURE NEUTRALIZATION — recipe body only (0.5.0+)
   The importer now wraps recipe content in [vc_row][vc_column] and
   wraps prose in [vc_column_text], so a recipe is editable as a
   structured page in the WPBakery backend editor, not one
   unstructured blob. That means WPBakery's own front-end CSS
   (js_composer) now renders extra wrapper markup inside the
   recipe body: .vc_row/.wpb_row negative margins, column gutter
   padding, and .wpb_text_column/.wpb_content_element block
   spacing. None of that is wanted here: this plugin's own
   component CSS already controls every bit of spacing/rhythm
   inside .szc-step, .szc-generic-section, .szc-chef-card, etc.
   Neutralized to zero so the page reads exactly as it did before
   0.5.0, and scoped strictly to .szc-recipe-main (the single-
   Recipe template's content column) so it never touches WPBakery
   content anywhere else on the site (e.g. the catalog page's own
   normal use of vc_row/vc_column). #ajax-content-wrap-anchored +
   !important, same specificity approach as THEME FIREWALL below,
   since WPBakery's own CSS load order isn't guaranteed relative
   to this stylesheet's.
   ============================================================ */

#ajax-content-wrap .szc-recipe-main .vc_row,
#ajax-content-wrap .szc-recipe-main .wpb_row {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

#ajax-content-wrap .szc-recipe-main .vc_column_container,
#ajax-content-wrap .szc-recipe-main .wpb_column {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

#ajax-content-wrap .szc-recipe-main .vc_column-inner {
	padding: 0 !important;
}

#ajax-content-wrap .szc-recipe-main .wpb_text_column,
#ajax-content-wrap .szc-recipe-main .wpb_content_element {
	margin: 0 !important;
}

/* vc_column_text's own inner prose ([szc_chef]/[szc_outcome]/[szc_questions]
   bodies can hold more than one block, e.g. Nigel's chef note is a
   paragraph THEN a blockquote) should space out exactly like plain
   sibling paragraphs used to (relying on the browser's default ~1em
   paragraph margin before 0.5.0), not like WPBakery's own block spacing.
   Classic "owl selector": zero margin on every child, margin-TOP only
   between siblings -- gives the first child no top gap and the last
   child no bottom gap with no separate :last-child rule needed, so it
   can't drift out of sync the way a hardcoded :last-child rule can.
   Scoped to p/ul/ol only, deliberately NOT blockquote: blockquote
   already has its own intentional component margin elsewhere (e.g.
   .szc-chef-body blockquote's margin: 14px 0 0, immediately below)
   that this reset must not clobber. The #ajax-content-wrap ID anchor
   here out-specifies that plain 2-class rule regardless of !important,
   so touching blockquote at all would silently win and replace its
   designed 14px top margin with this generic 1em -- leaving blockquote
   out of both the zero-reset and the sibling-gap rule means its own
   margin: 14px 0 0 keeps controlling its spacing exactly as before,
   whatever sits before or after it. */
#ajax-content-wrap .szc-recipe-main .wpb_wrapper {
	margin: 0 !important;
	padding: 0 !important;
}
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > p,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > ul,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > ol {
	margin: 0 !important;
}
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > p + p,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > p + ul,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > p + ol,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > ul + p,
#ajax-content-wrap .szc-recipe-main .wpb_wrapper > ol + p {
	margin-top: 1em !important;
}

/* [szc_step]'s own lede paragraph(s) (rendered as their own
   [vc_column_text] block, a DIRECT child of .szc-step-body) previously
   got their spacing from ".szc-step-body > p" -- that selector no longer
   matches now that the <p> sits one level deeper inside .wpb_wrapper, so
   the same 18px is re-applied here, one level up, to the wrapper itself. */
#ajax-content-wrap .szc-recipe-main .szc-step-body > .wpb_text_column {
	margin: 0 0 18px !important;
}

/* Both real recipes only ever nest ONE [vc_column_text] block inside
   [szc_outcome]/[szc_questions]/[szc_chef] today, so the blanket
   ".wpb_text_column { margin: 0 }" rule above is a no-op there in
   practice. But the WPBakery backend editor now genuinely lets an
   editor drop a SECOND Text Block inside one of those containers (the
   as_parent allow-list permits it), and a zero-margin second block
   would sit flush against the first with no gap. Cheap forward-proofing:
   give any 2nd-or-later Text Block the same 1em top gap the p+p owl
   selector already uses inside a single Text Block. */
#ajax-content-wrap .szc-recipe-main .szc-callout-content > .wpb_text_column + .wpb_text_column,
#ajax-content-wrap .szc-recipe-main .szc-chef-body > .wpb_text_column + .wpb_text_column {
	margin-top: 1em !important;
}

/* ============================================================
   THEME FIREWALL — Salient / senzing-global bleed into cookbook UI
   Salient forces `code { display:block }` (turns inline chips into
   full-width bars and shreds sentences at every chip) and paints
   `pre` with its own light background (unreadable prompt boxes).
   ID-anchored (#ajax-content-wrap) + !important so these always
   win, per this project's specificity lessons. Scoped strictly
   inside .szc-cb — zero effect outside cookbook components.
   ============================================================ */

/* 1) Inline code chips: force back to inline flow everywhere */
#ajax-content-wrap .szc-cb code {
	display: inline !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	white-space: normal !important;
	font-family: var(--szc-font-mono) !important;
}

/* 2) Light-section chip skin (everything except the dark prompt box) */
#ajax-content-wrap .szc-cb :not(pre) > code {
	background: #F1EDE9 !important;
	color: var(--szc-light-text) !important;
	border: 1px solid var(--szc-light-border) !important;
	border-radius: 4px !important;
	padding: 1px 7px !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	box-shadow: none !important;
}

/* 3) Prompt block: kill the theme's light pre background/border */
#ajax-content-wrap .szc-cb .szc-prompt-code {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--szc-text) !important;
	white-space: pre-wrap !important;
	overflow: visible !important;
	max-width: none !important;
}
#ajax-content-wrap .szc-cb .szc-prompt-code code {
	display: block !important;
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	white-space: inherit !important;
}

/* 4) Theme section padding: senzing-global.css paints EVERY <section>
   with padding: 96px 40px (the EventoZilla bleed class). Cookbook
   <section> components opt out — this is what made inter-section
   gaps huge on <section> blocks and tight on <div> blocks. */
#ajax-content-wrap section.szc-cb,
#ajax-content-wrap .szc-cb section {
	padding: 0 !important;
}

/* 5) Uniform vertical rhythm: ONE bottom margin per top-level recipe
   block, zero top margins, identical whether the wrapper rendered as
   <section> (shortcodes) or <div> (parser sections). */
#ajax-content-wrap .szc-cb.szc-step,
#ajax-content-wrap .szc-cb.szc-generic-section {
	margin: 0 0 64px !important;
}

/* 6) First-time notice: force full column width, left-justified, and
   vertically centered rows. Something in the theme cascade was
   shrink-centering the box and re-adding paragraph margins (which
   pushed the sentence off the icon/button baseline). ID-anchored so
   the cookbook always wins, scoped to the notice only. */
#ajax-content-wrap .szc-cb.szc-first-time-wrap {
	width: 100% !important;
	max-width: var(--szc-max-content, 1200px) !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}
#ajax-content-wrap .szc-cb .szc-first-time-notice {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	box-sizing: border-box !important;
}
#ajax-content-wrap .szc-cb .szc-first-time-text {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	flex: 1 1 240px !important;
}