/* Recipe Builder landing page - scoped styles on top of design-system.css + lp-styles.css.
   This is the ad-driven landing page (industry -> task -> recipe, no signup to see it) -
   distinct from /recipe/ (the custom free-text builder for direct/organic visitors, which
   this page links out to as "Build a fully custom recipe"). See specs/ or the GTM plan doc
   for why these are two separate pages rather than one flow. */

:root {
  --rb-green-tint: #e3f9ef;
}

/* ============================================
   HERO - light, two-column grid (matches recipe/index.html pattern)
   ============================================ */
.rb-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 3.5rem 1.5rem 4rem;
}

.rb-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  transition: grid-template-columns 0.4s ease, gap 0.4s ease;
}

.rb-hero-content {
  max-width: 560px;
  padding-top: 0.5rem;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.rb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(27, 185, 120, 0.1);
  color: #0e8856;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.rb-hero-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

.rb-hero-description {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.7;
}

.rb-hero-builder-col {
  position: relative;
}

/* Once a recipe is showing (Step C), the hero-content column is dead weight next to a
   potentially long recipe - collapse to single-column and let the recipe take the full
   width, same pattern as the onet-lp job-profile pages' hero-copy/quiz-col collapse
   (.job-hero-copy / .job-hero-quiz-col in the onet-lp page templates - NOTE: never write
   the onet-lp directory path with a wildcard asterisk followed by a slash in a CSS comment,
   that two-character sequence closes the comment early and silently corrupts every rule
   after it, which is exactly what broke this whole stylesheet the first time this was
   written).
   Desktop only (min-width guard) - mobile is already stacked single-column via
   the existing max-width:1100px rule below, nothing to collapse there. Body class is set
   generically by recipe-builder/script.js's setProgress(), no page-specific JS needed.
   Grid (not flex like onet-lp's hero), so the collapse technique differs: animate the
   hero-content column to 0fr on the CONTAINER's grid-template-columns (a valid, transitionable
   track size) rather than onet-lp's flex-basis/position:absolute trick, which has no direct
   Grid equivalent. */
@media (min-width: 1101px) {
  body.rb-at-step-2 .rb-hero-container { grid-template-columns: 0fr 1fr; gap: 0; }
  body.rb-at-step-2 .rb-hero-content { opacity: 0; pointer-events: none; }
}

@media (max-width: 1100px) {
  .rb-hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 640px;
  }
  .rb-hero-content {
    max-width: none;
  }
  .rb-hero-title {
    font-size: 2rem;
  }
}

/* ============================================
   STICKY STRIP - replaces the collapsed hero-copy column once a recipe is showing.
   Reproduces the onet-lp job-profile pages' .job-strip, minus the price/buy CTA - this page
   isn't selling a paid profile, so the strip only ever offers Back / Share / View Profile.
   ============================================ */
.rb-strip {
  display: none;
  align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 0.9rem 1.1rem;
  /* onet-lp's .job-strip inherits its width constraint from its page's <main class=
     "main-content"> wrapper (max-width:1200px, centered) - this page has no such wrapper
     around the strip (it sits directly in .rb-hero, which spans the full section), so the
     same 1200px/centered constraint has to be set directly here instead, matching
     .rb-hero-container's own max-width so the strip lines up with the hero content below it. */
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
  position: sticky; top: 12px; z-index: 40;
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}
@media (min-width: 1101px) {
  body.rb-at-step-2 .rb-strip { display: flex; opacity: 1; transform: translateY(0); }
}
.rb-strip-back {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: none; color: #64748b; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; padding: 0.4rem 0.5rem 0.4rem 0; flex: 0 0 auto; white-space: nowrap;
  transition: color 0.15s; font-family: inherit;
}
.rb-strip-back:hover { color: #1e293b; }
.rb-strip-back svg { flex: 0 0 auto; }
.rb-strip-divider { width: 1px; align-self: stretch; background: #e2e8f0; flex: 0 0 auto; }
.rb-strip-btn {
  border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; text-align: center; text-decoration: none; display: inline-block;
  white-space: nowrap; font-family: inherit; margin-left: auto;
}
.rb-strip-btn + .rb-strip-btn { margin-left: 0.6rem; }
.rb-strip-btn-primary { background: #1bb978; color: #fff !important; }
.rb-strip-btn-primary:hover { background: #159b63; }
/* Profile link's text is now dynamic ("See the Full {Job Title} AI Profile" - can run long
   for verbose O*NET titles), so it needs to wrap instead of .rb-strip-btn's default
   white-space:nowrap/inline-block, and the icon needs proper inline alignment. */
#rbStripProfileLink { display: inline-flex; align-items: center; gap: 0.45rem; white-space: normal; text-align: left; }
.rb-strip-profile-icon { flex: 0 0 auto; font-size: 0.95rem; line-height: 1; }
.rb-strip-btn-secondary { background: #fff; color: #1e293b !important; border: 1px solid #e2e8f0 !important; margin-left: auto; }
.rb-strip-btn-secondary:hover { background: #f8fafc; }
.rb-strip-btn-secondary + .rb-strip-btn-primary { margin-left: 0.6rem; }

.rb-strip-share-form {
  display: none; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  max-width: 1200px; margin: -0.75rem auto 1.5rem; padding: 0 1.1rem;
}
@media (min-width: 1101px) {
  body.rb-at-step-2 .rb-strip-share-form.show { display: flex; }
}
.rb-strip-share-form input {
  flex: 1 1 240px; min-width: 0; border: 1.5px solid var(--neutral-300, #dddddd);
  border-radius: var(--radius-md, 8px); padding: 8px 12px; font-size: 13.5px; font-family: inherit;
}
.rb-strip-share-form button {
  background: var(--primary-green, #1bb978); color: #fff; border: none; border-radius: var(--radius-md, 8px);
  padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.rb-strip-share-form button:hover { background: var(--primary-green-dark, #0e8856); }
.rb-strip-share-msg { font-size: 12.5px; color: var(--neutral-500, #6b7280); }
.rb-strip-share-msg.success { color: #0e8856; font-weight: 600; }
.rb-strip-share-msg.error { color: #dc2626; font-weight: 600; }

/* ============================================
   BUILDER CARD
   ============================================ */
.rb-proto {
  background: var(--neutral-100, #fff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-8, 32px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  position: relative;
}
/* "Try it - free" badge, reproduced from the onet-lp job-profile pages' .job-quiz-badge -
   glow/accent treatment so the widget reads as the primary interactive element on the page,
   not a plain card, matching what onet-lp already established as the working pattern. */
.rb-proto-badge {
  box-shadow: 0 0 0 1px rgba(27,185,120,0.18), 0 12px 32px rgba(27,185,120,0.14), 0 4px 12px rgba(15,23,42,0.06);
}
.rb-quiz-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #0e8856; color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-radius: 999px 999px 0 0;
  position: absolute; top: -1.6rem; left: 1.25rem;
}

.rb-progress { display: flex; gap: 5px; margin-bottom: var(--space-5, 20px); }
.rb-prog-step { flex: 1; height: 4px; border-radius: var(--radius-full, 9999px); background: var(--neutral-200, #eeeeee); transition: background 0.2s ease; }
.rb-prog-step.done { background: var(--primary-green, #1bb978); }
.rb-prog-step.current { background: var(--primary-green-light, #2dd68f); }

.rb-trail { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.rb-trail:empty { margin-bottom: 0; }
.rb-trail-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; color: var(--neutral-500, #6b7280);
  animation: rb-in 0.25s ease both;
}
.rb-trail-row .rb-check { color: var(--primary-green, #1bb978); font-weight: 700; }
.rb-trail-row .rb-val { color: var(--neutral-800, #1f2937); font-weight: 600; }
.rb-trail-row .rb-edit {
  margin-left: auto; background: none; border: none; color: var(--neutral-400, #9ca3af);
  font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit;
}

.rb-q-label { font-size: 1.05rem; font-weight: 700; margin: 16px 0 4px; color: var(--neutral-900, #1a1a1a); }
.rb-q-hint { font-size: 0.85rem; color: var(--neutral-500, #6b7280); margin: 0 0 var(--space-4, 16px); }

/* ---- Step A: industry card grid ---- */
.rb-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-pick-card {
  border: 1.5px solid var(--neutral-200, #eeeeee); border-radius: var(--radius-md, 8px); padding: 14px 12px;
  cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s;
  background: #fff; font: inherit; color: inherit;
}
.rb-pick-card:hover, .rb-pick-card:focus-visible { border-color: var(--primary-green-light, #2dd68f); outline: none; }
.rb-pick-card .rb-emoji { font-size: 21px; display: block; margin-bottom: 6px; }
.rb-pick-card .rb-name { font-size: 12.5px; font-weight: 600; color: var(--neutral-800, #2d2d2d); }

/* ---- Step B: task pill list ---- */
.rb-pill-list { display: flex; flex-direction: column; gap: 8px; }
.rb-pill-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--neutral-200, #eeeeee); border-radius: var(--radius-md, 8px); padding: 12px 16px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: #fff; font: inherit; color: inherit;
}
.rb-pill-row:hover, .rb-pill-row:focus-visible { border-color: var(--primary-green-light, #2dd68f); outline: none; }
.rb-pill-row .rb-pname { font-size: 13.5px; font-weight: 700; color: var(--neutral-800, #2d2d2d); }
.rb-pill-tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: var(--rb-green-tint); color: #0e8856; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle;
}
.rb-pill-row .rb-pdesc { font-size: 12px; color: var(--neutral-500, #6b7280); margin-top: 1px; }

/* Step B skeleton - bridges the network gap while fetchOnetTasksForSlug resolves. Rows
   reuse .rb-pill-row's box so the swap to real pills doesn't shift layout; lines are sized
   to roughly match .rb-pname/.rb-pdesc so it reads as "this text is loading", not a generic
   placeholder block. */
.rb-pill-skeleton { cursor: default; pointer-events: none; }
.rb-pill-skeleton:hover { border-color: var(--neutral-200, #eeeeee); }
.rb-pill-skeleton > div { width: 100%; }
.rb-skel-line {
  height: 11px; border-radius: 4px; margin: 3px 0;
  background: linear-gradient(90deg, var(--neutral-200, #eeeeee) 25%, var(--rb-green-tint, #e3f7ee) 50%, var(--neutral-200, #eeeeee) 75%);
  background-size: 200% 100%; animation: rb-shimmer 1.4s ease-in-out infinite;
}
.rb-skel-line-title { width: 46%; height: 13px; }
.rb-skel-line-desc { width: 78%; }
@keyframes rb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rb-skel-line { animation: none; background: var(--neutral-200, #eeeeee); }
}

.rb-toggle {
  background: none; border: none; color: #0e8856; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 10px 2px; text-align: left; font-family: inherit;
}
.rb-generic-wrap { display: none; flex-direction: column; gap: 8px; margin-top: 8px; }
.rb-generic-wrap.open { display: flex; }

/* ---- Step A "Other" job-title search + generic free-text/textarea inputs ----
   IMPORTANT: .rb-other-select (the class on the <input id="rb-other-job-title">) must NOT
   appear in the plain-input border rule below. Tom Select hides that original input
   (display:none via .ts-hidden-accessible) but leaves its classes in place, AND copies those
   same classes onto the new wrapper <div class="ts-wrapper rb-other-select ...> it builds
   next to it - so a rule matching .rb-other-select bordering the ALSO-bordered .ts-control
   inside that wrapper is exactly how a double border happens. The wrapper's .ts-control is
   the only element that should ever get a border here. */
.rb-other-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rb-other-form input:not([type="checkbox"]), .rb-other-form textarea {
  border: 1.5px solid var(--neutral-300, #dddddd); border-radius: var(--radius-md, 8px); padding: 11px 14px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--neutral-900, #1a1a1a); width: 100%; box-sizing: border-box;
}
.rb-cb-textarea { resize: vertical; min-height: 76px; }

/* Real, unticked-by-default marketing consent checkbox (GDPR/PECR - Planet49/CJEU: a
   pre-checked box is not valid consent, only an affirmative click is). Used on the
   custom-build form; the notify-me form doesn't need one - see handleNotifySubmit's comment
   for why that whole form already IS the consent act. */
.rb-consent-row {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--neutral-600, #666); line-height: 1.4;
}
.rb-consent-row input[type="checkbox"] {
  width: 15px; height: 15px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary-green, #1bb978); cursor: pointer;
}
.rb-btn {
  background: var(--primary-green, #1bb978); color: #fff; border: none; border-radius: var(--radius-md, 8px);
  padding: 11px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  align-self: flex-start; transition: background 0.15s;
}
.rb-btn:hover { background: var(--primary-green-dark, #0e8856); }

/* ---- Custom-build loading / error states (replaces the whole form on submit) ---- */
.rb-loading { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px 24px; }
.rb-loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3.5px solid var(--rb-green-tint); border-top-color: var(--primary-green, #1bb978);
  animation: rb-spin 0.8s linear infinite; margin-bottom: 20px;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rb-loading-spinner { animation-duration: 2.4s; }
}
.rb-loading-msg { font-size: 15px; font-weight: 700; color: var(--neutral-900, #1a1a1a); margin: 0 0 6px; min-height: 20px; }
.rb-loading-sub { font-size: 12.5px; color: var(--neutral-500, #6b7280); margin: 0; }
.rb-loading-error-icon { font-size: 28px; margin-bottom: 12px; }
.rb-loading-error .rb-loading-msg { color: var(--error-color, #e53e3e); margin-bottom: 18px; }
.rb-loading-error .rb-btn { align-self: center; }
.rb-back-link { font-size: 12.5px; color: var(--neutral-500, #6b7280); margin: 12px 0 0; }
.rb-back-link a { color: var(--neutral-500, #6b7280); text-decoration: underline; cursor: pointer; }

/* Tom Select's visible control - the ONLY bordered element in the widget. Its own
   .ts-wrapper and the hidden original <input> must carry no border of their own. */
.ts-wrapper.rb-other-select, .ts-wrapper.rb-other-select.single { border: none; position: relative; }
.ts-wrapper .ts-control {
  border: 1.5px solid var(--neutral-300, #dddddd); border-radius: var(--radius-md, 8px);
  padding: 9px 13px; font-family: inherit; background: #fff;
}
.ts-wrapper.focus .ts-control { border-color: var(--primary-green-light, #2dd68f); box-shadow: none; }
/* Tom Select's own tom-select.css sets .ts-dropdown { z-index: 10 }, which sat UNDER the
   next element in the DOM (the "Back to industry list" link) since nothing here raised it
   above that - a click meant for a dropdown option landed on the link underneath instead.
   The .ts-wrapper.rb-other-select prefix (rather than bare .ts-dropdown) gives this rule
   higher specificity than the library's, so the override holds regardless of <link> load
   order - index.html also loads tom-select.css before this file for the same reason, but
   don't rely on load order alone to keep this fixed if a CDN version bump changes it. */
.ts-wrapper.rb-other-select + .ts-dropdown, .ts-dropdown {
  font-family: inherit; border: 1px solid var(--neutral-200, #eeeeee); border-radius: var(--radius-md, 8px);
  margin-top: 4px; position: absolute; z-index: 20; width: 100%; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}
.rb-back-link { position: relative; z-index: 1; }

/* ---- Step C: recipe ---- */
.rb-recipe-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.rb-recipe-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--rb-green-tint); color: #0e8856; padding: 3px 9px; border-radius: var(--radius-full, 9999px);
}
.rb-recipe-title { font-size: 18px; font-weight: 700; color: var(--neutral-900, #1a1a1a); margin: 0 0 14px; }
.rb-recipe-desc { font-size: 13.5px; color: var(--neutral-600, #666); margin: 0 0 22px; line-height: 1.55; }
.rb-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.rb-tool-chip { font-size: 11.5px; font-weight: 600; color: #0e8856; background: var(--rb-green-tint); padding: 3px 10px; border-radius: var(--radius-full, 9999px); }
a.rb-tool-chip, a.rb-tool-chip-yours, a.rb-tool-chip-suggested { text-decoration: none; cursor: pointer; }
a.rb-tool-chip:hover, a.rb-tool-chip-yours:hover, a.rb-tool-chip-suggested:hover { filter: brightness(0.95); text-decoration: underline; }
/* Generated recipes only - assigned_tool (what the prompt is actually written for) vs
   SuggestedTools (the model's separate list of alternatives, not from the visitor's stack). */
.rb-tool-chip-yours { color: #0e8856; background: var(--rb-green-tint); border: 1px solid var(--primary-green-light, #2dd68f); }
.rb-tool-chip-suggested { color: var(--neutral-600, #666); background: var(--neutral-100, #f7f7f7); border: 1px solid var(--neutral-200, #eeeeee); }

/* !important on padding-left only: confirmed via computed-style inspection that
   about/styles.css's ".main-content ul, .main-content ol { padding-left: 1.5rem }" beats this
   rule's padding-left:0 on specificity (2-class compound selector vs. this rule's 1 class) when
   the quiz is embedded inside a page that wraps content in <main class="main-content"> (e.g.
   the /jobs/onet-lp/ pages) - recipe-builder/index.html itself has no such wrapper so never hit
   this. Not a padding-shorthand issue as first assumed - genuinely a cross-stylesheet
   specificity collision, only reproducible when this widget is embedded elsewhere. */
.rb-steps { list-style: none; margin: 0 0 22px; padding: 0; padding-left: 0 !important; display: flex; flex-direction: column; gap: 16px; }
.rb-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.rb-step-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--rb-green-tint); color: #0e8856;
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.rb-step-instruction { font-size: 13.5px; color: var(--neutral-600, #666); margin: 0 0 8px; line-height: 1.55; padding-top: 3px; }
/* Copy button moved to its own top-right-overlaid position (position:relative on the box,
   position:absolute on the button) instead of a permanent flex column reserving ~60px of
   horizontal space beside the text on every row - that column was wasted width on every prompt,
   worse on narrow cards where the text measure is already tight. Text now uses the box's full
   width; top padding widened so the button never overlaps the first line. */
/* Light, non-presumptive hint - names the tool the prompt was written for (from
   assigned_tool/primary_tool) without claiming the visitor has it; toolChips above the card
   already carries that +/✓ distinction, this is just "here's where this text goes". */
.rb-prompt-tool-hint { font-size: 12px; color: var(--neutral-500, #6b7280); margin: 0 0 6px; }
.rb-prompt-tool-hint strong { color: var(--neutral-700, #444); font-weight: 600; }
.rb-prompt-box {
  position: relative;
  background: var(--neutral-100, #f7f7f7); border: 1px solid var(--neutral-200, #eeeeee); border-radius: 7px;
  padding: 34px 12px 10px;
}
.rb-prompt-text {
  font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--neutral-900, #1a1a1a);
  line-height: 1.5; display: block; background: none; padding: 0; white-space: pre-wrap;
  /* Multi-step judgment + richer prompt-writing rules (MYPEAS_RecipeBuilder) produce genuinely
     long prompts now - without a cap this pushes the layout tall. Scroll internally. */
  max-height: 220px;
  overflow-y: auto;
}
.rb-copy-btn {
  position: absolute; top: 8px; right: 10px;
  background: #fff; border: 1px solid var(--neutral-300, #dddddd);
  color: #0e8856; font-size: 11.5px; font-weight: 700; padding: 5px 10px;
  border-radius: 5px; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s;
}
.rb-copy-btn:hover { border-color: var(--primary-green-light, #2dd68f); }
.rb-copy-btn.copied { background: var(--rb-green-tint); border-color: var(--primary-green, #1bb978); }

/* ---- The single lead-capture card (Step C) - solid-fill dark green. This used to be two
   cards: a bold "see your profile" card and a lighter-tint "get new recipes" card below it.
   Merged into one because a cold visitor clicking straight through to a full paid profile
   converts far worse than the same visitor giving an email - so the card with real visual
   weight should ask for the email, not the profile click. The profile pitch now lives in the
   confirmation email instead (see MYPEAS_RecipeBuilderNotify), a warmer moment since they've
   already committed once by the time they read it. ---- */
.rb-upsell {
  background: var(--primary-green-dark, #0e8856); border-radius: var(--radius-lg, 12px);
  padding: 22px 22px 20px; margin: 0 0 18px;
}
/* strong (headline) and the body copy are siblings, not nested in one <p> - that's what
   gives them real independent spacing instead of reading as one cramped run-on block. */
.rb-upsell strong {
  display: block; font-size: 19px; font-weight: 800; color: #fff;
  line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.01em;
}
.rb-upsell p { margin: 0 0 16px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.rb-upsell-form { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-upsell-form input {
  border: none; border-radius: 6px; padding: 10px 13px; font-size: 13.5px; font-family: inherit;
  flex: 1 1 200px; min-width: 0; background: #fff; color: var(--neutral-900, #1a1a1a);
}
.rb-upsell-btn {
  background: #fff; color: var(--primary-green-dark, #0e8856); border: none; border-radius: 6px;
  padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  flex: 0 0 auto; white-space: nowrap; transition: background 0.15s;
}
.rb-upsell-btn:hover { background: #f0fdf8; }
.rb-upsell-btn:disabled { opacity: 0.7; cursor: default; }
.rb-upsell-btn-link { display: inline-block; text-decoration: none; }
.rb-ask-error { font-size: 12px; color: #ffe0dc; margin-top: 8px; display: none; }
.rb-ask-error.show { display: block; }
.rb-done-msg {
  font-size: 12.5px; color: #0e8856; font-weight: 600; display: none;
}
.rb-done-msg.show { display: block; }
/* On the dark-green card, the light-on-dark #0e8856 default is unreadable - white/near-white
   instead. .rb-done-msg-light is only ever used inside .rb-upsell. */
.rb-done-msg-light.show { color: #fff; }

/* Step C only - lighter-weight text link, since a recipe is already in hand here and this
   shouldn't visually compete with the notify card above it. */
.rb-custom-link { font-size: 14px; color: var(--neutral-600, #666); text-align: center; margin-top: 10px; }
.rb-custom-link a { color: #0e8856; font-weight: 600; text-decoration: underline; }

/* Step A / Step B - full card treatment (icon + two-line text), matching the visual weight
   of .rb-pick-card / .rb-pill-row so this reads as a real third option, not a footnote. */
.rb-custom-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px dashed var(--neutral-300, #dddddd); border-radius: var(--radius-md, 8px);
  padding: 14px 16px; margin-top: 10px; cursor: pointer; background: #fff; font: inherit; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.rb-custom-card:hover, .rb-custom-card:focus-visible { border-color: var(--primary-green-light, #2dd68f); border-style: solid; outline: none; }
.rb-custom-card .rb-emoji { font-size: 22px; flex-shrink: 0; }
.rb-custom-card-text { display: flex; flex-direction: column; gap: 1px; }
.rb-custom-card-text strong { font-size: 14px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.rb-custom-card-text span { font-size: 12.5px; color: #0e8856; font-weight: 600; }

.rb-restart { text-align: center; margin-top: 16px; }
.rb-restart button { background: none; border: none; color: var(--neutral-500, #6b7280); font-size: 12.5px; text-decoration: underline; cursor: pointer; font-family: inherit; }

@keyframes rb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#rb-body > * { animation: rb-in 0.3s ease both; }

/* ============================================
   EVALUATE TAB - ported from recipe/style.css (recipe-hitl-*, recipe-eff-*, recipe-tabs-nav,
   recipe-subcard) so the depth matches /recipe rather than a stripped-down version.
   ============================================ */
.rb-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--neutral-200, #eeeeee);
  margin-bottom: 16px;
}
.rb-tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 4px; margin-right: 20px; font-size: 0.9rem; font-weight: 600;
  color: var(--neutral-500, #6b7280); cursor: pointer; font-family: inherit;
}
.rb-tab-btn--active { color: #0e8856; border-bottom-color: var(--primary-green, #1bb978); }
.rb-tab-panel { display: none; }
.rb-tab-panel--active { display: block; }

.rb-subcard {
  border: 1px solid var(--neutral-200, #eeeeee); border-radius: var(--radius-lg, 12px);
  padding: 20px; margin-bottom: 16px;
}
.rb-subcard-title { font-size: 1.05rem; font-weight: 700; color: var(--neutral-900, #1a1a1a); margin: 0 0 4px; }
.rb-subcard-subtitle { font-size: 0.85rem; color: var(--neutral-500, #6b7280); margin: 0 0 16px; }
.rb-step-detail-label { font-size: 0.85rem; font-weight: 600; color: var(--neutral-700, #374151); margin: 0 0 4px; }

.rb-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rb-stat-tile { flex: 1; min-width: 130px; background: var(--neutral-50, #f9fafb); border-radius: var(--radius-md, 8px); padding: 16px; text-align: center; }
.rb-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--primary-green, #1bb978); }
.rb-stat-label { font-size: 0.8rem; color: var(--neutral-500, #6b7280); display: flex; align-items: center; justify-content: center; gap: 4px; }
.rb-stat-tooltip-wrap { position: relative; display: inline-flex; }
.rb-stat-tooltip-trigger {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--neutral-400, #9ca3af);
  background: transparent; color: var(--neutral-500, #6b7280); font-size: 0.65rem; line-height: 1;
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rb-stat-tooltip-trigger:hover, .rb-stat-tooltip-trigger:focus-visible { border-color: var(--primary-green, #1bb978); color: #0e8856; }
.rb-stat-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; background: var(--neutral-900, #1a1a1a); color: #fff;
  font-size: 0.75rem; line-height: 1.4; text-align: left; padding: 8px 10px; border-radius: 6px;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none; z-index: 5;
}
.rb-stat-tooltip-trigger:hover + .rb-stat-tooltip, .rb-stat-tooltip-trigger:focus-visible + .rb-stat-tooltip { opacity: 1; visibility: visible; }

.rb-eff-summary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-200, #eeeeee); }
.rb-eff-value { font-size: 0.85rem; font-weight: 700; color: #0e8856; margin-bottom: 4px; }
.rb-eff-explanation { font-size: 0.85rem; color: var(--neutral-600, #666); margin: 0; }

.rb-explanation { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-200, #eeeeee); }
.rb-explanation-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #0e8856; margin-bottom: 6px; }
.rb-explanation ul { margin: 0; padding-left: 18px; }
.rb-explanation li { font-size: 0.85rem; color: var(--neutral-600, #666); line-height: 1.5; margin-bottom: 4px; }

.rb-caution {
  margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md, 8px);
  padding: 10px 14px; font-size: 0.8rem; color: #92400e;
}
.rb-caution strong { display: block; margin-bottom: 2px; }
.rb-caution p { margin: 0; }
.rb-caution-icon { margin-right: 2px; }

.rb-hitl-result { display: flex; align-items: center; gap: 16px; }
.rb-hitl-score-circle {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800;
  color: var(--neutral-900, #1a1a1a); background: var(--rb-green-tint);
}
.rb-hitl-score-circle[data-hitl-level="medium"] { background: #fef3c7; }
.rb-hitl-score-circle[data-hitl-level="high"], .rb-hitl-score-circle[data-hitl-level="none"] { background: #fee2e2; }
.rb-hitl-content { flex: 1; min-width: 0; }
.rb-hitl-bucket-badge {
  display: inline-block; font-size: 0.78rem; font-weight: 700; border-radius: 999px;
  padding: 3px 12px; margin-bottom: 6px; background: var(--rb-green-tint); color: #0e8856;
}
.rb-hitl-bucket-badge[data-hitl-level="medium"] { background: #fef3c7; color: #92400e; }
.rb-hitl-bucket-badge[data-hitl-level="high"], .rb-hitl-bucket-badge[data-hitl-level="none"] { background: #fee2e2; color: #991b1b; }
.rb-hitl-reasoning { margin: 0; font-size: 0.88rem; color: var(--neutral-700, #374151); line-height: 1.5; }

.rb-hitl-explain-toggle {
  background: none; border: none; color: #0e8856; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; padding: 0; margin-top: 16px; font-family: inherit;
}
.rb-hitl-dimensions { display: none; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-200, #eeeeee); }
.rb-hitl-dimensions--open { display: flex; }
.rb-hitl-dimension-header { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--neutral-700, #374151); margin-bottom: 3px; }
.rb-hitl-dimension-score { color: var(--neutral-500, #6b7280); font-weight: 700; }
.rb-hitl-dimension-bar { height: 6px; border-radius: 999px; background: var(--neutral-100, #f7f7f7); overflow: hidden; }
.rb-hitl-dimension-fill { height: 100%; background: var(--primary-green, #1bb978); border-radius: 999px; }
.rb-hitl-dimension-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--neutral-400, #9ca3af); margin-top: 3px; }

@media (max-width: 480px) {
  .rb-card-grid { grid-template-columns: 1fr 1fr; }
  .rb-upsell-form input { width: 100%; }
  /* .rb-proto's flat 32px padding + .rb-step's 26px number column eat ~16%+ of viewport width
     on a phone before any content starts - shrink both at narrow widths. Number column keeps
     its own gap but tightens from 26px+12px to 20px+8px, and step text drops its extra
     top-padding offset since the smaller circle no longer needs the visual balance. */
  .rb-proto { padding: 18px; }
  .rb-step { grid-template-columns: 20px 1fr; gap: 8px; }
  .rb-step-num { width: 20px; height: 20px; font-size: 11px; }
  .rb-step-instruction { padding-top: 1px; }
}