/* ============================================================
 * AIDO — Reusable UI components
 * ------------------------------------------------------------
 * Styles in this file are global and meant to be reused across
 * features. Add a new component here when you need it more than
 * once, or when it represents a UI pattern that future features
 * will likely reuse (toggles, badges, pills, callouts, etc.).
 *
 * Loaded globally via templates/base.html — no per-template
 * include is required.
 *
 * Conventions:
 *  - Each component starts with a top-level comment block that
 *    describes what it is, when to use it, and shows the markup.
 *  - Brand colors come from variables in aido_v2.css (loaded
 *    first), e.g. --color-resolution-blue (#001489).
 *  - Keep selectors low-specificity. Components should compose
 *    cleanly — JS hook classes (e.g. .ah-mode-toggle) live on
 *    the same element but never style anything themselves.
 * ============================================================ */


/* ------------------------------------------------------------
 * .segmented-control
 * ------------------------------------------------------------
 * Pill-shaped segmented control (iOS-style). A row of mutually
 * exclusive buttons where the selected one is filled with the
 * brand blue. Use for switching between two or three small
 * options inline (display modes, granularity toggles, etc.).
 *
 * Markup:
 *   <div class="segmented-control" role="group" aria-label="…">
 *       <button type="button" class="active">Option A</button>
 *       <button type="button">Option B</button>
 *   </div>
 *
 * Toggle the .active class in JS (or render it server-side) to
 * mark the selected segment. The component does no behavior —
 * pair it with whatever click/HTMX handler the feature needs.
 * ------------------------------------------------------------ */
.segmented-control {
    display: inline-flex;
    padding: 3px;
    background: #eef0f3;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
}
.segmented-control button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #495057;
    transition: background-color .12s ease, color .12s ease,
                box-shadow .12s ease;
}
.segmented-control button:hover {
    color: #001489;
}
.segmented-control button.active {
    background: #001489;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 20, 137, 0.18);
}
.segmented-control button.active:hover {
    color: #fff;
}
.segmented-control button:focus-visible {
    outline: 2px solid #001489;
    outline-offset: 2px;
}