/* ================================================================
   components/toggle.css
   Segmented pill toggle — two-or-more buttons in a bordered pill,
   active segment filled brand teal. Loaded GLOBALLY from base.html
   (every page gets it).

   Where it's used
   ───────────────
     • Detail-page sidebars: MT/€ unit switch
       — see commodity_detail.html, member_state_detail.html, etc.
     • Commodity trade map: Import/Export view switch
       — see commodity_detail.html (inside .cc-trade-map__topbar)
     • Country selector pages: Rank/A-Z sort switch
       — see templates/components/country_sort_control.html

   Why this lives here (not in page-detail-body.css)
   ─────────────────────────────────────────────────
   It was inside page-detail-body.css until the selector pages started
   using it. Those pages don't (and shouldn't) load detail-page CSS,
   so the widget gets promoted to components/ and the detail-page file
   keeps a one-line pointer.

   Markup
   ──────
     <div class="cc-detail-toggle" role="group" aria-label="…">
       <button class="cc-detail-toggle__btn cc-detail-toggle__btn--active">A</button>
       <button class="cc-detail-toggle__btn">B</button>
     </div>
   ================================================================ */

.cc-detail-toggle {
    display: flex; gap: 3px; padding: 3px;
    background: var(--ae-white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
}
.cc-detail-toggle__btn {
    flex: 1;
    padding: 5px 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ae-black);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.cc-detail-toggle__btn--active {
    background: var(--ae-darkblue);
    color: var(--white);
}