/* Hero pills (lang, style) and the toolbar framework pill.
   These are not modals; they sit on the hero and toolbar. Split out of
   css/05-modals.css in 1.1.0 because they share specificity-level rules
   with the modal surfaces but were colocated for historical reasons. */

  /* Theme toggle button (sun/moon icon in the toolbar) */
  #themeToggle .theme-icon {
    margin-right: 4px;
    font-size: 13px;
  }

  /* Hero right-side controls (language and framework pills grouped together) */
  .hero-controls-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Hero language-toggle pill (visual sibling of the framework pill) */
  .hero-lang-pill {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
  }
  .hero-lang-pill:hover {
    background: var(--surface-2);
    border-color: var(--accent);
  }
  .hero-lang-pill .lang-icon { font-size: 14px; line-height: 1; }
  .hero-lang-pill .lang-current {
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: 0.05em;
  }
  .hero-lang-pill .lang-sep {
    color: var(--text-mute);
    margin: 0 1px;
  }
  .hero-lang-pill .lang-other {
    color: var(--text-mute);
    letter-spacing: 0.05em;
  }

  /* Left column: stacks the language and explanation-style pills
     vertically. The project / framework pill sits to their right,
     vertically centered. */
  .hero-pill-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }

  /* Hero explanation-style pill (same visual footprint as the lang
     pill but with a different icon: Simple vs. Technical). */
  .hero-style-pill {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
  }
  .hero-style-pill:hover {
    background: var(--surface-2);
    border-color: var(--accent);
  }
  .hero-style-pill .style-icon { font-size: 13px; line-height: 1; }
  .hero-style-pill .style-current {
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .hero-style-pill .style-sep {
    color: var(--text-mute);
    margin: 0 1px;
  }
  .hero-style-pill .style-other {
    color: var(--text-mute);
    letter-spacing: 0.04em;
  }
  /* Style-aware accent color: green tone in Simple mode, orange tone
     in Technical mode (mirrors the body content palette). */
  .hero-style-pill.style-simple .style-current { color: var(--mvp); }
  .hero-style-pill.style-technical .style-current { color: var(--accent-2); }
  /* Narrow screens: hide the inactive option on the style pill so only
     the current choice is shown (saves horizontal space). */
  @media (max-width: 560px) {
    .hero-style-pill { padding: 5px 10px; font-size: 11.5px; }
    .hero-style-pill .style-sep,
    .hero-style-pill .style-other { display: none; }
    .hero-lang-pill { padding: 7px 12px; font-size: 12.5px; }
  }


  /* Toolbar framework pill (icon plus label) */
  .framework-pill .fw-pill-icon {
    font-size: 14px;
    line-height: 1;
    margin-right: 2px;
  }
  .framework-pill .fw-pill-label {
    font-weight: 600;
  }