/* ============================================================
   components/segmented.css — segmented control
   ------------------------------------------------------------
   A contained tonal group of mutually-exclusive options for filters,
   view modes, and compact local state. Native <button> elements carry
   the selection through aria-pressed; the container is role="group".
   Sentence-case Inter — not a row of unrelated solid muttons.

   <div class="segmented" data-segmented role="group" aria-label="View">
       <button type="button" class="segmented__item" data-value="grid"
               aria-pressed="true">Grid</button>
       <button type="button" class="segmented__item" data-value="list"
               aria-pressed="false">List</button>
   </div>
   ============================================================ */

.segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-inner);
    background: var(--surface-2);
    max-width: 100%;
    overflow: auto;
    scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.segmented__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: calc(var(--control-height-sm) - 6px);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-muted-color);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition:
        background-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.segmented__item .majestic-icon,
.segmented__item > svg { width: 1em; height: 1em; }

.segmented__item:hover { color: var(--text-color); }

.segmented__item[aria-pressed="true"] {
    background: var(--surface-hover);
    color: var(--text-color);
    box-shadow: var(--shadow-rest);
}

.segmented__item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.segmented__item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Soft radial activation wash from the pointer / centre on keyboard. */
.segmented__item[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
        color-mix(in srgb, var(--primary-color) 24%, transparent),
        transparent 62%);
    opacity: 0;
    pointer-events: none;
    animation: segmented-wash var(--motion-expressive) var(--ease-out);
}

@keyframes segmented-wash {
    from { opacity: 0.9; }
    to { opacity: 0; }
}

@media (pointer: coarse) {
    .segmented__item { min-height: 40px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .segmented__item[aria-pressed="true"]::after { animation: none; }
}

@media (forced-colors: active) {
    .segmented { border: 1px solid ButtonText; }
    .segmented__item[aria-pressed="true"] {
        background: Highlight;
        color: HighlightText;
    }
    .segmented__item:focus-visible { outline: 2px solid Highlight; }
}