/*
 * Toggle pills: reusable two-or-more-state view controls. See assets/js/pill-toggle.js and
 * docs/DROPDOWN_PILL.md ("Toggle pills"). Same metrics as the dropdown pill and the GPU
 * compare view pills: 34px tall, fully rounded, 0.88rem/800 text. Theme tokens only, so
 * html[data-theme="light"] restyles them; the site button style skips .pctv-toggle__btn.
 *
 *   [data-pctv-flip]                     A  single toggle pill (one button, flips on click)
 *   [data-pctv-segmented]                B  segmented pill with a sliding thumb (radiogroup)
 *   [data-pctv-segmented="icon"]         D  icon-only segmented pill
 *   (C, the view dropdown, is a plain <select data-pctv-pill-select>.)
 */

body .pctv-toggle__btn {
    box-sizing: border-box;
    min-height: 34px;
    margin: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---- A: single toggle pill ---- */
body .pctv-flip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(232, 239, 234, 0.34);
    border-radius: 999px;
    background: var(--nc-surface-2);
    color: var(--nc-text-strong);
    box-shadow: none;
}

body .pctv-flip:hover,
body .pctv-flip:focus-visible {
    border-color: var(--nc-accent);
    background: var(--nc-surface-3);
    color: var(--nc-link-hover);
    box-shadow: 0 0 0 1px rgba(35, 136, 255, 0.22);
}

body .pctv-flip:focus-visible,
body .pctv-seg__opt:focus-visible {
    outline: 2px solid var(--nc-focus, var(--nc-accent));
    outline-offset: 2px;
}

.pctv-flip__icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* Every state label is stacked in one grid cell, so the pill is always as wide as its
   longest label and neighbours never shift when it flips. */
.pctv-flip__labels {
    display: inline-grid;
    text-align: left;
}

.pctv-flip__label {
    grid-area: 1 / 1;
    white-space: nowrap;
}

.pctv-flip__label:not(.is-current) {
    visibility: hidden;
}

/* ---- B / D: segmented pill ---- */
.pctv-seg {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    box-sizing: border-box;
    min-height: 34px;
    padding: 2px;
    border: 1px solid rgba(232, 239, 234, 0.34);
    border-radius: 999px;
    background: var(--nc-surface-2);
    vertical-align: middle;
}

body .pctv-seg__opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.2rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--nc-text-muted);
    white-space: nowrap;
}

body .pctv-seg__opt:hover {
    color: var(--nc-text-strong);
}

body .pctv-seg__opt[aria-checked="true"] {
    color: var(--nc-link-hover);
}

.pctv-seg--icon .pctv-seg__opt {
    padding: 0.2rem 0.65rem;
}

.pctv-seg__opt svg {
    width: 16px;
    height: 16px;
}

.pctv-seg__thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc((100% - 4px) / var(--pctv-seg-count, 2));
    transform: translateX(calc(100% * var(--pctv-seg-index, 0)));
    box-sizing: border-box;
    border: 1px solid var(--nc-accent);
    border-radius: 999px;
    background: var(--nc-surface-3);
    box-shadow: 0 0 0 1px rgba(35, 136, 255, 0.22);
    pointer-events: none;
}

/* Animate only after the first placement, so the thumb doesn't slide in on load. */
.pctv-seg.is-animated .pctv-seg__thumb {
    transition: transform 0.18s ease, width 0.18s ease;
}

/* Without JS (no thumb) the checked option carries the active look itself. */
.pctv-seg:not(.is-ready) .pctv-seg__opt[aria-checked="true"] {
    background: var(--nc-surface-3);
    box-shadow: inset 0 0 0 1px var(--nc-accent);
}

html[data-theme="light"] :is(.pctv-flip, .pctv-seg) {
    border-color: var(--nc-border-strong);
}

@media (prefers-reduced-motion: reduce) {
    .pctv-seg__thumb {
        transition: none;
    }
}

@media (forced-colors: active) {
    .pctv-seg__thumb {
        border-color: Highlight;
    }
    body .pctv-seg__opt[aria-checked="true"] {
        color: Highlight;
    }
}

@media (hover: none) {
    body .pctv-flip,
    .pctv-seg {
        min-height: 40px;
    }
}