/*!
 * fluid-tabs
 * Version  : 1.0.2
 * License  : MPL-2.0
 * Copyright: 2026 Ewan Howell
 */
:root{--tab-transition-duration:.25s;--tab-transition-easing:cubic-bezier(.4, 0, .2, 1);--tab-slide-lag:.333;--tab-tease-x:10px;--tab-panel-distance:64px}@property --tab-panel-distance{syntax:"<length>";inherits:true;initial-value:64px}@property --tab-panel-blend{syntax:"<custom-ident>";inherits:false;initial-value:normal}@property --tab-fade-start{syntax:"<length>";inherits:false;initial-value:0px}@property --tab-fade-end{syntax:"<length>";inherits:false;initial-value:0px}@property --tab-reveal-left{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-reveal-right{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-reveal-top{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-reveal-bottom{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-reveal-edge-x{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-reveal-edge-y{syntax:"<length>";inherits:true;initial-value:0px}@property --tab-tease-x{syntax:"<length>";inherits:true;initial-value:10px}@property --tab-fade{syntax:"<length>";inherits:true;initial-value:60px}.tab-bar:not(.tab-bar-ready),.tab-bar:not(.tab-bar-ready) *,.tab-bar:not(.tab-bar-ready) ::before,.tab-contents:not(.tab-bar-ready),.tab-contents:not(.tab-bar-ready) *{transition:none!important}.tab-bar{display:flex;position:relative;flex-wrap:nowrap;overflow:hidden;scrollbar-width:none;touch-action:pan-y;margin-bottom:24px;--tab-fade:60px;mask-image:linear-gradient(to right,transparent,#000 var(--tab-fade-start),#000 calc(100% - var(--tab-fade-end)),transparent);transition:--tab-fade-start var(--tab-transition-duration) var(--tab-transition-easing),--tab-fade-end var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar:dir(rtl){mask-image:linear-gradient(to left,transparent,#000 var(--tab-fade-start),#000 calc(100% - var(--tab-fade-end)),transparent)}.tab-bar.tab-bar-dragging{cursor:grabbing}.tab-bar.tab-bar-fade-start{--tab-fade-start:var(--tab-fade)}.tab-bar.tab-bar-fade-end{--tab-fade-end:var(--tab-fade)}.tab-bar-wrap{flex-wrap:wrap;overflow:visible;touch-action:auto}.tab-bar-button{all:unset;cursor:pointer;user-select:none;display:flex;flex:1;align-items:center;justify-content:center;white-space:nowrap;font-weight:500;gap:8px;position:relative;z-index:1;--tab-button-x:-1;transition:background var(--tab-transition-duration) var(--tab-transition-easing),color var(--tab-transition-duration) var(--tab-transition-easing),border-color var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar-button.active{--tab-button-x:0}.tab-bar-button.active~.tab-bar-button{--tab-button-x:1}.tab-bar:dir(rtl)>.tab-bar-button:not(.active){--tab-button-x:1}.tab-bar:dir(rtl)>.tab-bar-button.active~.tab-bar-button{--tab-button-x:-1}.tab-bar-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.tab-bar-button *{font-family:inherit}.tab-bar-button img{pointer-events:none}.tab-contents{box-sizing:border-box;position:relative;transition:height var(--tab-transition-duration) var(--tab-transition-easing);display:flex;interpolate-size:initial;width:100%!important;max-width:100%!important}.tab-contents:not(.transitioning){height:auto!important}.tab-contents.transitioning{isolation:isolate}.tab-contents.transitioning>.tab-content{--tab-panel-blend:inherit;mix-blend-mode:var(--tab-panel-blend)}.tab-contents:not(.transitioning)>.tab-content.active{position:initial}.tab-contents:not(.transitioning)>.tab-content:not(.active){height:0;padding-block:0;border-block-width:0;overflow:hidden}.tab-content{--tab-panel-x:-1;transform:translateX(calc(var(--tab-panel-x) * var(--tab-panel-distance)));opacity:0;transition:transform var(--tab-transition-duration) var(--tab-transition-easing),opacity var(--tab-transition-duration) var(--tab-transition-easing);position:absolute;top:0;left:0;right:0;pointer-events:none;width:100%}.tab-content.active{--tab-panel-x:0;transform:initial;opacity:1;pointer-events:initial}.tab-content.active~.tab-content{--tab-panel-x:1}.tab-contents:dir(rtl)>.tab-content:not(.active){--tab-panel-x:1}.tab-contents:dir(rtl)>.tab-content.active~.tab-content{--tab-panel-x:-1}.tab-bar-active{position:absolute;transition:left var(--tab-transition-duration) var(--tab-transition-easing),right var(--tab-transition-duration) var(--tab-transition-easing),top var(--tab-transition-duration) var(--tab-transition-easing),bottom var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar-button-reveal{position:absolute;inset:0;box-sizing:border-box;display:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;gap:inherit;padding:inherit;pointer-events:none;visibility:hidden;clip-path:inset(var(--tab-reveal-top) var(--tab-reveal-right) var(--tab-reveal-bottom) var(--tab-reveal-left) round var(--tab-reveal-radius));transition:--tab-reveal-left var(--tab-transition-duration) var(--tab-transition-easing),--tab-reveal-right var(--tab-transition-duration) var(--tab-transition-easing),--tab-reveal-top var(--tab-transition-duration) var(--tab-transition-easing),--tab-reveal-bottom var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar.tab-style-underline{width:100%;justify-content:flex-start;margin-bottom:20px;box-shadow:inset 0 -1px 0 #d6d6d6}.tab-style-underline>.tab-bar-button{flex:0 0 auto;color:#6b6b6b;padding:12px 16px}.tab-style-underline>.tab-bar-button.active{color:#1c1c1c}.tab-style-underline>.tab-bar-active{border-bottom:2px solid #1c1c1c}.tab-bar.tab-style-tabs{width:100%;gap:4px;margin-bottom:0}.tab-style-tabs>.tab-bar-button{background:#d1d1d1;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;color:#6b6b6b;padding:6px 20px;margin-bottom:-1px}.tab-style-tabs>.tab-bar-button.active{background:#f1f1f1;border-color:#d6d6d6;color:#1c1c1c}.tab-bar-wrap.tab-style-tabs>.tab-bar-button::after{content:"";position:absolute;top:100%;left:-1px;right:-1px;height:100px;border-left:inherit;border-right:inherit;background-color:inherit;background-image:linear-gradient(transparent,rgba(0,0,0,.12) 8px)}.tab-contents.tab-style-tabs{border-radius:0 0 10px 10px;background:#f1f1f1;border:1px solid #d6d6d6;overflow:hidden}.tab-style-tabs>.tab-content{padding:24px}.tab-bar.tab-style-slide{width:fit-content;max-width:100%;padding:4px;background:#d1d1d1;border-radius:10px}.tab-style-slide>.tab-bar-active{top:4px;bottom:4px;background:#fff;border-radius:6px}.tab-style-slide>.tab-bar-button{padding:10px 18px;min-width:min-content;font-weight:600;color:#71717a}.tab-style-slide>.tab-bar-button.active,.tab-style-slide>.tab-bar-button>.tab-bar-button-reveal{color:#18181b}.tab-style-slide>.tab-bar-button:focus-visible{border-radius:6px}.tab-bar.tab-style-pill{--tab-tease-x:4px;justify-content:flex-start;gap:8px}.tab-style-pill>.tab-bar-button{flex:0 0 auto;padding:7px 15px;border:1px solid rgba(0,0,0,.16);border-radius:999px;color:#6b6b6b}.tab-style-pill>.tab-bar-button.active,.tab-style-pill>.tab-bar-button>.tab-bar-button-reveal{color:#fff}.tab-style-pill>.tab-bar-active{background:#1c1c1c;border-radius:999px}.tab-style-pill>.tab-bar-button,.tab-style-slide>.tab-bar-button{transition-property:background,border-color}.tab-style-pill>.tab-bar-button.active,.tab-style-slide>.tab-bar-button.active{transition:background var(--tab-transition-duration) var(--tab-transition-easing),border-color var(--tab-transition-duration) var(--tab-transition-easing),color 0s linear var(--tab-transition-duration)}.tab-style-pill>.tab-bar-button>.tab-bar-button-reveal,.tab-style-slide>.tab-bar-button>.tab-bar-button-reveal{visibility:visible}.tab-bar.tab-style-card,.tab-bar.tab-style-pill{box-sizing:border-box;width:calc(100% + 2px);margin:-1px -1px 19px;padding:1px}.tab-bar.tab-style-nav{width:100%;margin-bottom:0;box-shadow:inset 0 1px 0 #d6d6d6}.tab-style-nav>.tab-bar-button{flex:1 1 0;flex-direction:column;gap:2px;padding:8px 4px;color:#6b6b6b;font-size:.75rem}.tab-style-nav>.tab-bar-button.active{color:#1c1c1c}.tab-style-nav>.tab-bar-button svg{width:22px;height:22px}.tab-style-nav>.tab-bar-active{border-top:3px solid #1c1c1c}.tab-bar.tab-style-card{--tab-reveal-soft:80px;--tab-slide-lag:0;gap:12px}.tab-style-card>.tab-bar-button{flex:1 1 0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:140px;padding:13px 15px;border:1px solid #d6d6d6;border-radius:10px;color:#1c1c1c;white-space:normal}.tab-style-card>.tab-bar-button>.tab-bar-button-reveal{inset:-2px;visibility:visible;color:transparent;clip-path:none;--tab-reveal-mask-x:linear-gradient(to right, transparent calc(var(--tab-reveal-left) - var(--tab-reveal-edge-x) - 1px), #000 calc(var(--tab-reveal-left) - 1px), #000 calc(100% - var(--tab-reveal-right) + 1px), transparent calc(100% - var(--tab-reveal-right) + var(--tab-reveal-edge-x) + 1px));--tab-reveal-mask-y:linear-gradient(to bottom, transparent calc(var(--tab-reveal-top) - var(--tab-reveal-edge-y) - 1px), #000 calc(var(--tab-reveal-top) - 1px), #000 calc(100% - var(--tab-reveal-bottom) + 1px), transparent calc(100% - var(--tab-reveal-bottom) + var(--tab-reveal-edge-y) + 1px));mask:var(--tab-reveal-mask-x)}.tab-bar-wrap.tab-style-card>.tab-bar-button>.tab-bar-button-reveal{mask:var(--tab-reveal-mask-x),var(--tab-reveal-mask-y);mask-composite:intersect}.tab-style-card>.tab-bar-button>.tab-bar-button-reveal::before{content:"";position:absolute;inset:1px;border:2px solid #1c1c1c;border-radius:10px}.tab-style-card>.tab-bar-button>span{color:#6b6b6b;font-size:.85em;font-weight:400}.tab-bar.tab-bar-vertical{flex-direction:column;flex:none;align-self:flex-start;width:fit-content;margin-bottom:0;margin-inline-end:20px;touch-action:auto;mask-image:linear-gradient(to bottom,transparent,#000 var(--tab-fade-start),#000 calc(100% - var(--tab-fade-end)),transparent)}.tab-bar.tab-bar-vertical.tab-bar-scrollable{touch-action:pan-x}.tab-bar-vertical>.tab-bar-button{flex:0 0 auto;justify-content:flex-start}.tab-bar-vertical:dir(rtl)>.tab-bar-button:not(.active){--tab-button-x:-1}.tab-bar-vertical:dir(rtl)>.tab-bar-button.active~.tab-bar-button{--tab-button-x:1}.tab-contents-vertical{flex:1 1 0;align-self:flex-start;min-width:0}.tab-contents-vertical>.tab-content:not(.active){transform:translateY(calc(var(--tab-panel-x) * var(--tab-panel-distance)))}.tab-contents-vertical:dir(rtl)>.tab-content:not(.active){--tab-panel-x:-1}.tab-contents-vertical:dir(rtl)>.tab-content.active~.tab-content{--tab-panel-x:1}.tab-bar-vertical.tab-style-underline{box-shadow:inset -1px 0 0 #d6d6d6}.tab-bar-vertical.tab-style-underline:dir(rtl){box-shadow:inset 1px 0 0 #d6d6d6}.tab-bar-vertical.tab-style-underline>.tab-bar-active{border-bottom:0;border-inline-end:2px solid #1c1c1c}.tab-bar-vertical.tab-style-nav{box-shadow:inset 1px 0 0 #d6d6d6}.tab-bar-vertical.tab-style-nav:dir(rtl){box-shadow:inset -1px 0 0 #d6d6d6}.tab-bar-vertical.tab-style-nav>.tab-bar-button{padding:10px 12px}.tab-bar-vertical.tab-style-nav>.tab-bar-active{border-top:0;border-inline-start:3px solid #1c1c1c}.tab-bar-vertical.tab-style-pill>.tab-bar-active{border-radius:calc(.5lh + 8px)}.tab-bar.tab-bar-vertical.tab-style-card,.tab-bar.tab-bar-vertical.tab-style-pill{margin-bottom:-1px;margin-inline-end:19px}.tab-bar.tab-bar-vertical.tab-style-card{width:222px}.tab-bar-vertical.tab-style-card>.tab-bar-button>.tab-bar-button-reveal{mask:var(--tab-reveal-mask-y)}.tab-bar.tab-bar-vertical.tab-style-tabs{margin-inline-end:0;padding-bottom:10px}.tab-bar-vertical.tab-style-tabs>.tab-bar-button{border:1px solid transparent;border-inline-end:0;border-radius:0;border-start-start-radius:10px;border-end-start-radius:10px;margin-bottom:0;margin-inline-end:-1px}.tab-bar-vertical.tab-style-tabs>.tab-bar-button.active{border-color:#d6d6d6}.tab-contents-vertical.tab-style-tabs{border-radius:10px;border-start-start-radius:0}@media (prefers-reduced-motion:reduce){.tab-bar,.tab-bar-active,.tab-bar-button,.tab-bar-button-reveal,.tab-bar>.tab-bar-button.active,.tab-content,.tab-contents{transition:none}.tab-content{--tab-panel-x:0!important}.tab-bar-button{--tab-button-x:0!important}}