fix: move FrameworkSelector + ConditionalQuestionnaire styles to docs.css for production builds (#472)

* fix: move component styles to docs.css to survive Astro MDX build

* refactor: remove redundant style blocks from components (styles live in docs.css)

* fix: scope .sl-steps to #questionnaire-steps and add :focus-visible to interactive buttons

- Scope all .sl-steps selectors under #questionnaire-steps to avoid
  overriding Starlight's native step component styles elsewhere
- Add :focus-visible outlines to .framework-button, .question-btn,
  and .react-framework-buttons .framework-button for keyboard accessibility

Addresses CodeRabbit review feedback on PR #472.

* fix: match question-btn font to page body text

Change font-family from var(--sl-font) to inherit so buttons get the
full Starlight font stack with fallbacks. Bump font-size from
var(--sl-text-sm) to var(--sl-text-body) to match surrounding text.

* fix: add monospace fallback stack to questionnaire code blocks

var(--sl-font-mono) only resolves to 'IBM Plex Mono' without fallbacks.
When that font isn't loaded, code blocks fall back to the browser's
default proportional font. Add the same fallback stack Starlight uses
for its own <code> elements.

Author: WcaleNieWolny

src/components/ConditionalQuestionnaire.astro

@@ -672,227 +672,7 @@ export default component$(() => {
   </ol>
 </div>
 
-<style is:global>
-  /* Custom Steps Styling (copied from Starlight) */
-  .sl-steps {
-    --bullet-size: calc(var(--sl-line-height) * 1rem);
-    --bullet-margin: 0.375rem;
-
-    list-style: none;
-    counter-reset: steps-counter var(--sl-steps-start, 0);
-    padding-inline-start: 0;
-  }
-
-  .sl-steps > ol {
-    list-style: none;
-    padding-inline-start: 0;
-    margin: 0;
-  }
-
-  .sl-steps > ol > li {
-    counter-increment: steps-counter;
-    position: relative;
-    padding-inline-start: calc(var(--bullet-size) + 1rem);
-    padding-bottom: 1px;
-    min-height: calc(var(--bullet-size) + var(--bullet-margin));
-  }
-
-  .sl-steps > ol > li + li {
-    margin-top: 0;
-  }
-
-  /* Custom list marker element */
-  .sl-steps > ol > li::before {
-    content: counter(steps-counter);
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    width: var(--bullet-size);
-    height: var(--bullet-size);
-    line-height: var(--bullet-size);
-
-    font-size: var(--sl-text-xs);
-    font-weight: 600;
-    text-align: center;
-    color: var(--sl-color-white);
-    background-color: var(--sl-color-gray-6);
-    border-radius: 99rem;
-    box-shadow: inset 0 0 0 1px var(--sl-color-gray-5);
-  }
-
-  /* Vertical guideline linking list numbers */
-  .sl-steps > ol > li::after {
-    --guide-width: 1px;
-    content: '';
-    position: absolute;
-    top: calc(var(--bullet-size) + var(--bullet-margin));
-    bottom: var(--bullet-margin);
-    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
-    width: var(--guide-width);
-    background-color: var(--sl-color-hairline-light);
-  }
-
-  /* Adjust first item inside a step */
-  .sl-steps > ol > li > :first-child {
-    --lh: calc(1em * var(--sl-line-height));
-    --shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
-    transform: translateY(var(--shift-y));
-    margin-bottom: var(--shift-y);
-  }
-
-  /* Question buttons styling */
-  .question-buttons {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    margin-top: 1rem;
-  }
-
-  .question-btn {
-    background: var(--sl-color-gray-6);
-    color: var(--sl-color-gray-1);
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.375rem;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: var(--sl-font);
-    font-size: var(--sl-text-sm);
-    margin: 0;
-  }
-
-  .question-btn:hover {
-    border-color: var(--sl-color-blue);
-    background-color: var(--sl-color-gray-5);
-  }
-
-  .question-btn.selected {
-    border-color: var(--sl-color-blue);
-    background-color: var(--sl-color-blue);
-    color: white;
-  }
-
-  .script-type-buttons {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .script-type-buttons .question-btn {
-    font-family: monospace;
-  }
-
-  /* React framework buttons styling */
-  .react-framework-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    gap: 10px;
-    margin-top: 1rem;
-  }
-
-  .react-framework-buttons .framework-button {
-    flex: 0 0 calc(25% - 7.5px);
-    max-width: 200px;
-    min-height: 120px;
-    padding: 1rem;
-    border: 2px solid var(--sl-color-gray-5);
-    border-radius: 8px;
-    background-color: var(--sl-color-black);
-    color: var(--sl-color-white);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    margin: 0;
-  }
-
-  .react-framework-buttons .framework-icon {
-    width: 48px;
-    height: 48px;
-    margin-bottom: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .react-framework-buttons .framework-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  .react-framework-buttons .framework-name {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.2;
-  }
-
-  .react-framework-buttons .framework-button:hover {
-    border-color: var(--sl-color-blue);
-    background-color: var(--sl-color-gray-6);
-  }
-
-  .react-framework-buttons .framework-button.selected {
-    border-color: var(--sl-color-blue);
-    background-color: var(--sl-color-blue);
-    color: white;
-  }
-
-  /* Warning styling */
-  .questionnaire-warning {
-    margin-top: 1rem;
-  }
-
-  /* Code block styling */
-  .questionnaire-code {
-    margin-top: 1rem;
-  }
-
-  .questionnaire-code pre {
-    background: var(--sl-color-gray-6);
-    border-radius: 0.375rem;
-    padding: 1rem;
-    overflow-x: auto;
-  }
-
-  .questionnaire-code code {
-    font-family: var(--sl-font-mono);
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-1);
-    white-space: pre-wrap;
-    line-height: 1.1;
-    display: block;
-  }
-
-  .questionnaire-code .diff-line {
-    padding: 0 0.5rem;
-    margin: 0;
-    line-height: 1.1;
-    min-height: 1.1em;
-  }
-
-  .questionnaire-code .diff-added {
-    background-color: rgba(34, 197, 94, 0.2);
-    color: #22c55e;
-    border-left: 3px solid #22c55e;
-    padding: 0 calc(0.5rem - 3px);
-    line-height: 1.1;
-    min-height: 1.1em;
-  }
-
-  .questionnaire-code .diff-removed {
-    background-color: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-    border-left: 3px solid #ef4444;
-    padding: 0 calc(0.5rem - 3px);
-    line-height: 1.1;
-    min-height: 1.1em;
-  }
-</style>
+<!-- Styles live in src/css/docs.css (Astro drops component <style> blocks from MDX pages during build) -->
 
 <script is:inline define:vars={{ questionFlow }}>
   document.addEventListener('DOMContentLoaded', function () {