/* ─── Page chrome ──────────────────────────────────────────────── */
/* *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
    padding: 48px 24px;
}
h1 { font-size: 22px; font-weight: 600; margin-bottom: 32px; }
.demo + .demo { margin-top: 48px; }
.demo h2 { font-size: 13px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .05em; color: #6e6e73; margin-bottom: 12px; }

.panels { margin-top: 20px; }
.panel {
    display: none;
    padding: 20px;
    background: white;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
}
.panel.is-active { display: block; } */

/* ─── TabNav CSS (translated from ac-tabnav SCSS) ──────────────── */

/* @property declarations — animated CSS custom properties */
@property --cs-tabnav-mask-color-left  { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --cs-tabnav-mask-color-right { syntax: "<color>"; inherits: true; initial-value: transparent; }

.cs-tabnav {
    /* layout tokens */
    --cs-tabnav-height: 44px;
    --cs-tabnav-scale: 1;
    --cs-tabnav-inner-height: 36px;
    --cs-tabnav-platter-padding: 4px;

    /* colours (Apple swatch approximations) */
    --cs-tabnav-platter-background: rgba(118, 118, 128, 0.12);
    --cs-tabnav-indicator-background: rgba(60, 60, 67, 0.18);
    --cs-tabnav-item-color: rgba(0, 0, 0, 0.56);
    --cs-tabnav-item-color-active: #1d1d1f;
    --cs-tabnav-paddle-color: rgba(0, 0, 0, .56);
    --cs-tabnav-paddle-color-hover: rgba(0, 0, 0, .80);
    --cs-tabnav-paddle-icon-opacity-disabled: 0.42;
    --cs-tabnav-focus-color: #0071e3;

    /* indicator */
    --cs-tabnav-indicator-start: var(--cs-tabnav-platter-padding);
    --cs-tabnav-indicator-width: 0px;

    /* paddle */
    --cs-tabnav-paddle-width: calc(var(--cs-tabnav-inner-height) + var(--cs-tabnav-platter-padding));
    --cs-tabnav-paddle-height: var(--cs-tabnav-inner-height);

    /* mask / overflow */
    --cs-tabnav-mask-gradient-width: 22px;
    --cs-tabnav-mask-opaque-width: calc(var(--cs-tabnav-paddle-width) - var(--cs-tabnav-platter-padding));
    --cs-tabnav-mask-offset: calc(var(--cs-tabnav-mask-opaque-width) + var(--cs-tabnav-mask-gradient-width));
    --cs-tabnav-mask-color-left: transparent;
    --cs-tabnav-mask-color-right: transparent;
    --cs-tabnav-mask-gradient: linear-gradient(to right,
    var(--cs-tabnav-mask-color-left) 0,
    var(--cs-tabnav-mask-color-left) var(--cs-tabnav-mask-opaque-width),
    black calc(var(--cs-tabnav-mask-opaque-width) + var(--cs-tabnav-mask-gradient-width)),
    black calc(100% - (var(--cs-tabnav-mask-opaque-width) + var(--cs-tabnav-mask-gradient-width))),
    var(--cs-tabnav-mask-color-right) calc(100% - var(--cs-tabnav-mask-opaque-width)),
    var(--cs-tabnav-mask-color-right) 100%
    );

    /* item */
    --cs-tabnav-item-padding: 16px;

    /* motion */
    --cs-tabnav-motion-scroll-duration: 0.32s;
    --cs-tabnav-motion-indicator-duration: 320ms;

    /* ---- structure ---- */
    position: relative;
    width: fit-content;
    max-width: 100%;
    font-size: 14px;
    line-height: 18px;
}

/* mask colour transitions — show/hide gradients as paddles appear/disappear */
.cs-tabnav:not(.cs-tabnav-disable-transitions) {
    transition-property: --cs-tabnav-mask-color-left, --cs-tabnav-mask-color-right;
    transition-duration: 40ms;
    transition-delay: 0ms, 0ms;
}
.cs-tabnav:has(.cs-tabnav-paddle-left.cs-tabnav-paddle-hidden) { --cs-tabnav-mask-color-left: black; }
.cs-tabnav:has(.cs-tabnav-paddle-right.cs-tabnav-paddle-hidden) { --cs-tabnav-mask-color-right: black; }
.cs-tabnav:not(.cs-tabnav-disable-transitions):has(.cs-tabnav-paddle-left.cs-tabnav-paddle-hidden) {
    transition-delay: 280ms, 0ms;
}
.cs-tabnav:not(.cs-tabnav-disable-transitions):has(.cs-tabnav-paddle-right.cs-tabnav-paddle-hidden) {
    transition-delay: 0ms, 280ms;
}

/* platter */
.cs-tabnav-platter {
    position: relative;
    height: calc(var(--cs-tabnav-height) * var(--cs-tabnav-scale));
    padding: var(--cs-tabnav-platter-padding);
    background-color: var(--cs-tabnav-platter-background);
    border-radius: 999px;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

/* mask — the scrollable container */
.cs-tabnav-mask {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 1;
    mask-image: var(--cs-tabnav-mask-gradient);
    overscroll-behavior: none;
}
.cs-tabnav-mask.cs-tabnav-mask-noscroll {
    mask-image: none;
    display: contents;
}

/* tab list */
.cs-tabnav-items {
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    margin: 0;
    padding: 0;
    width: fit-content;
    height: 100%;
    list-style: none;
    z-index: 1;
}

/* individual tab item */
.cs-tabnav-item {
    position: relative;
    height: 100%;
    color: var(--cs-tabnav-item-color);
    white-space: nowrap;
    transition: color 120ms ease-out;
}
.cs-tabnav-item.cs-tabnav-item-active {
    color: var(--cs-tabnav-item-color-active);
    transition-delay: 160ms;
    transition-duration: 160ms;
    transition-timing-function: ease-in;
}
.cs-tabnav-item.cs-tabnav-item-active .cs-tabnav-link {
    opacity: 1;
    cursor: auto;
}

/* tab button */
.cs-tabnav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--cs-tabnav-item-padding);
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 100ms ease-in-out;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cs-tabnav-link:focus { outline: none; }
.cs-tabnav-link:hover { opacity: 1; }

/* sliding indicator pill */
.cs-tabnav-indicator {
    position: absolute;
    top: var(--cs-tabnav-platter-padding);
    left: var(--cs-tabnav-indicator-start);
    bottom: var(--cs-tabnav-platter-padding);
    width: calc(var(--cs-tabnav-indicator-width) - 1px);
    height: calc(100% - (var(--cs-tabnav-platter-padding) * 2));
    background-color: var(--cs-tabnav-indicator-background);
    border-radius: 999px;
    transition: left var(--cs-tabnav-motion-indicator-duration) ease-out,
                width var(--cs-tabnav-motion-indicator-duration) ease-out;
    pointer-events: none;
}

/* no transitions during load / resize */
.cs-tabnav-disable-transitions,
.cs-tabnav-disable-transitions * {
    transition: none !important;
}
.cs-tabnav-reduced-motion,
.cs-tabnav-reduced-motion * { transition: none !important; }

/* focus-split: active item gets indicator bg, pill hides */
.cs-tabnav-focus-split .cs-tabnav-item-active .cs-tabnav-link {
    background-color: var(--cs-tabnav-indicator-background);
}
.cs-tabnav-focus-split .cs-tabnav-indicator { display: none; }

/* focus ring on indicator when keyboard nav is used */
.cs-tabnav:focus-within:has([data-focus-method="key"]) .cs-tabnav-indicator {
    outline: 2px solid var(--cs-tabnav-focus-color);
    outline-offset: 2px;
}

/* paddle arrows */
.cs-tabnav-paddles { pointer-events: none; }
.cs-tabnav-paddle {
    position: absolute;
    display: block;
    top: var(--cs-tabnav-platter-padding);
    bottom: var(--cs-tabnav-platter-padding);
    width: var(--cs-tabnav-paddle-width);
    min-height: var(--cs-tabnav-paddle-height);
    background-color: transparent;
    border: none;
    color: var(--cs-tabnav-paddle-color);
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
    transition: color 100ms ease-in-out,
                opacity 80ms 40ms ease-out,
                visibility 80ms 40ms step-start;
}
.cs-tabnav-paddle:hover { color: var(--cs-tabnav-paddle-color-hover); }
.cs-tabnav-paddle-left  { left: 0; }
.cs-tabnav-paddle-right { right: 0; }

.cs-tabnav-paddle-icon {
    position: absolute;
    translate: -50% 50%;
    bottom: 50%;
}
.cs-tabnav-paddle-left  .cs-tabnav-paddle-icon { left: calc(50% - 2px + var(--cs-tabnav-platter-padding)); }
.cs-tabnav-paddle-right .cs-tabnav-paddle-icon { left: calc(50% + 2px - var(--cs-tabnav-platter-padding)); }

.cs-tabnav-paddle.cs-tabnav-paddle-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 80ms 200ms ease-out, visibility 80ms 200ms step-end;
}
.cs-tabnav-paddle:disabled:not(.cs-tabnav-paddle-hidden) .cs-tabnav-paddle-icon {
    opacity: var(--cs-tabnav-paddle-icon-opacity-disabled);
}

/* hidden scale span used to detect font-size zoom */
.cs-tabnav-scale {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    font-size: var(--r-tabnav-scaling-font-size, 14px);
}

/* ─── Dark mode ─────────────────────────────────────────────────── */
.theme-dark body { background: #1d1d1f; color: #f5f5f7; }
.theme-dark .panel { background: #2c2c2e; color: #f5f5f7; }
.theme-dark .cs-tabnav {
    --cs-tabnav-platter-background: rgba(118, 118, 128, 0.24);
    --cs-tabnav-indicator-background: rgba(235, 235, 245, 0.18);
    --cs-tabnav-item-color: rgba(255, 255, 255, 0.56);
    --cs-tabnav-item-color-active: #f5f5f7;
    --cs-tabnav-paddle-color: rgba(255, 255, 255, .8);
    --cs-tabnav-paddle-color-hover: rgba(255, 255, 255, 1);
}

/* ─── Line variant ──────────────────────────────────────────────── */
/*
 * Usage: add .cs-tabnav-line to the root .cs-tabnav element.
 *
 * The line variant removes the pill platter and sliding indicator pill,
 * replacing them with a bottom underline that animates under the active tab.
 * All JS behaviour (scrolling, paddles, keyboard nav) is unchanged.
 */

.cs-tabnav-line {
    /* override pill-specific tokens */
    --cs-tabnav-platter-background:  transparent;
    --cs-tabnav-indicator-background: currentColor;
    --cs-tabnav-platter-padding: 0px;
    --cs-tabnav-inner-height: var(--cs-tabnav-height);
    --cs-tabnav-item-padding: 12px;

    /* line-specific tokens */
    --cs-tabnav-line-color:           #3C3C3C;
    --cs-tabnav-line-height:          2px;
    --cs-tabnav-line-border-radius:   1px;
    --cs-tabnav-line-track-color:     rgba(0, 0, 0, 0.1);
}

/* remove pill shape from platter */
.cs-tabnav-line .cs-tabnav-platter {
    background-color: var(--cs-tabnav-platter-background);
    border-radius: 0;
    backdrop-filter: none;
    overflow: visible;
    border-bottom: var(--cs-tabnav-line-height) solid var(--cs-tabnav-line-track-color);
}

/* the mask still scrolls, but no border-radius clipping needed */
.cs-tabnav-line .cs-tabnav-mask {
    overflow-x: hidden;
    border-radius: 0;
}

/* remove pill border-radius from individual links */
.cs-tabnav-line .cs-tabnav-link {
    border-radius: 0;
    opacity: 1;
}
.cs-tabnav-line .cs-tabnav-link:hover {
    opacity: 1;
    color: var(--cs-tabnav-line-color);
}

/* replace pill indicator with a bottom line */
.cs-tabnav-line .cs-tabnav-indicator {
    top: auto;
    bottom: calc(var(--cs-tabnav-line-height) * -1); /* sits on the track */
    height: var(--cs-tabnav-line-height);
    background-color: var(--cs-tabnav-line-color);
    border-radius: var(--cs-tabnav-line-border-radius);
}

/* active item — full opacity, line colour */
.cs-tabnav-line .cs-tabnav-item-active {
    color: var(--cs-tabnav-line-color);
}

/* focus: outline on the indicator underline */
.cs-tabnav-line:focus-within:has([data-focus-method="key"]) .cs-tabnav-indicator {
    outline: 2px solid var(--cs-tabnav-focus-color);
    outline-offset: 3px;
}

/* focus-split: active item gets a border-bottom instead of indicator */
.cs-tabnav-line.cs-tabnav-focus-split .cs-tabnav-item-active .cs-tabnav-link {
    background-color: transparent;
    border-bottom: var(--cs-tabnav-line-height) solid var(--cs-tabnav-line-color);
}
.cs-tabnav-line.cs-tabnav-focus-split .cs-tabnav-indicator { display: none; }

/* dark mode overrides for line variant */
.theme-dark .cs-tabnav-line {
    --cs-tabnav-line-color:        #f5f5f7;
    --cs-tabnav-line-track-color:  rgba(255, 255, 255, 0.15);
    --cs-tabnav-item-color:        rgba(255, 255, 255, 0.56);
    --cs-tabnav-item-color-active: #f5f5f7;
}