/* Shared Ratio tabs; JavaScript owns their interaction behavior. */
/* Keep the scroll footprint constant; the inner navigation reaches the header naturally. */
.tabs-sticky{--tabs-top-padding:8px;position:sticky;z-index:12;top:calc(var(--tabs-sticky-top,65px) - var(--tabs-top-padding));width:100%;min-width:0;max-width:100%;padding:var(--tabs-top-padding) 0 8px;isolation:isolate}
[data-tabs]{min-width:0}
.tabs-sticky::before{position:absolute;z-index:-1;inset:0 -8px;border-radius:calc(var(--radius) + 3px);background:var(--background);content:""}
.tabs-sticky::after{position:absolute;right:0;bottom:-11px;left:0;height:11px;background:linear-gradient(to bottom,color-mix(in srgb, var(--text-strong) 16%, transparent),transparent);content:"";opacity:0;pointer-events:none;transition:opacity .18s ease}
.tabs-nav{--tabs-current-item-width:var(--tabs-item-width,122px);display:flex;width:max-content;max-width:100%;height:46px;padding:0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:none;scrollbar-width:none;-ms-overflow-style:none;transition:border-color .16s ease,border-radius .16s ease}.tabs-nav::-webkit-scrollbar{display:none;width:0;height:0}
/* Captions stay inside their tab boxes so long names cannot create phantom overflow. */
.tabs-nav :is(button,a[role="tab"]){position:relative;flex:0 0 var(--tabs-item-width,122px);width:var(--tabs-item-width,122px);min-width:max-content;height:44px;min-height:44px;padding:0 10px;border:0;border-right:1px solid var(--interface-border);border-radius:0;background:transparent;color:var(--muted);box-shadow:none;font:inherit;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer}
.tabs-nav :is(button,a[role="tab"]):first-child{border-left:0}.tabs-nav :is(button,a[role="tab"]):last-child{border-right:0}.tabs-nav :is(button,a[role="tab"]):hover{background:var(--surface-subtle);color:var(--text-strong)}
.tabs-nav :is(button,a[role="tab"]).active,.tabs-nav :is(button,a[role="tab"])[aria-selected="true"]{background:var(--warning-light);color:var(--text-strong);font-weight:750;box-shadow:none}.tabs-nav :is(button,a[role="tab"]).active::after,.tabs-nav :is(button,a[role="tab"])[aria-selected="true"]::after{position:absolute;right:9px;bottom:0;left:9px;height:3px;border-radius:3px 3px 0 0;background:var(--accent);content:""}
/* Linked settings pages share tab geometry and native unsaved-aware navigation. */
.tabs-nav a[role="tab"]{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Linked pages do not mount the in-page controller that measures the joining corners. */
.tabs-sticky:has(.tabs-nav>a[role="tab"])>.tabs-join-corner{display:none}
/* Required validation stays calm while making every affected field and tab unmistakable. */
.required-validation-message{display:grid;gap:3px;margin:4px 0 10px;padding:11px 14px;border:1px solid var(--danger-border);border-radius:8px;background:var(--danger-light);color:var(--danger-strong);font-size:11.5px;line-height:1.45;box-shadow:0 2px 7px color-mix(in srgb, var(--danger) 5%, transparent)}.required-validation-message[hidden]{display:none}.required-validation-message strong{font-size:12px;font-weight:800}.required-validation-message span{color:var(--danger-strong)}
.tabs-nav :is(button,a[role="tab"]).has-validation-error{background:var(--danger-light);color:var(--danger)}.tabs-nav :is(button,a[role="tab"]).has-validation-error::after,.tabs-nav :is(button,a[role="tab"]).has-validation-error.active::after,.tabs-nav :is(button,a[role="tab"]).has-validation-error[aria-selected="true"]::after{position:absolute;right:9px;bottom:0;left:9px;height:3px;border-radius:3px 3px 0 0;background:var(--danger);content:""}
.ratio-field-invalid:not([type="checkbox"]):not([type="radio"]){border-color:var(--danger)!important;background-color:var(--danger-light)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 9%, transparent)!important}.ratio-field-invalid[type="checkbox"],.ratio-field-invalid[type="radio"]{outline:2px solid color-mix(in srgb, var(--danger) 50%, transparent);outline-offset:2px}.ratio-field-invalid:focus{border-color:var(--danger)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent)!important}.ratio-field-invalid-label{color:var(--danger-strong)!important}
.tabs-sticky.is-stuck::before{right:-30px;left:-30px;border-radius:0;background:var(--background)}
.tabs-sticky.is-stuck::after{opacity:1}
.app-main:has(.tabs-sticky.is-stuck)>.topbar{border-bottom-color:var(--interface-border)}
/* Clip every tab background to the same circular bottom corners as the SVG border. */
.tabs-sticky.is-stuck .tabs-nav{border-color:transparent;border-radius:0 0 10px 10px;transition:none}
.first-tab-active .tabs-sticky.is-stuck .tabs-nav{background:linear-gradient(to right,var(--warning-light) 0 var(--tabs-current-item-width),var(--surface) var(--tabs-current-item-width) 100%)}.last-tab-active .tabs-sticky.is-stuck .tabs-nav{background:linear-gradient(to left,var(--warning-light) 0 var(--tabs-current-item-width),var(--surface) var(--tabs-current-item-width) 100%)}
.tabs-join-corner{position:absolute;z-index:1;top:var(--tabs-top-padding);width:34px;height:46px;opacity:0;overflow:hidden;pointer-events:none;transition:opacity .16s ease}.tabs-sticky.is-stuck .tabs-join-corner{opacity:1}.tabs-join-corner-left{left:-24px}.tabs-join-corner-right{left:calc(var(--tabs-nav-width,100%) - 10px)}.tabs-join-corner svg{display:block;width:100%;height:100%;overflow:hidden}.tabs-corner-fill{fill:var(--on-fill);stroke:none;transition:fill .15s ease}.tabs-corner-line{display:none}.first-tab-active .tabs-join-corner-left .tabs-corner-fill,.last-tab-active .tabs-join-corner-right .tabs-corner-fill{fill:var(--on-fill)}
.tabs-sticky-outline{position:absolute;z-index:3;top:var(--tabs-top-padding);left:-24px;height:46px;overflow:visible;opacity:0;fill:none;stroke:var(--interface-border);stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;pointer-events:none;transition:opacity .16s ease}.tabs-sticky.is-stuck .tabs-sticky-outline{opacity:1}
[data-tabs].tabs-ready [data-tab-panel][hidden],[data-tabs].tabs-ready>section.card[hidden]{display:none}
/* Both panel tabs and ordinary linked tabs reserve a separate lane whenever the shared scroller appears. */
.tabs-sticky .tabs-nav.has-horizontal-overflow,.tabs-sticky.tabs-overflowing .tabs-nav{height:58px}
.tabs-sticky.tabs-overflowing .tabs-nav{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;border-radius:0;scrollbar-width:none;overscroll-behavior-x:contain}.tabs-sticky.tabs-overflowing .tabs-nav :is(button,a[role="tab"]):first-child,.tabs-sticky.tabs-overflowing .tabs-nav :is(button,a[role="tab"]):last-child{border-radius:0}.tabs-sticky.tabs-overflowing .tabs-join-corner,.tabs-sticky.tabs-overflowing .tabs-sticky-outline{display:none}.tabs-sticky.tabs-overflowing.is-stuck .tabs-nav{border-color:var(--border);border-right:0;border-left:0;border-radius:0}
/* The shared persistent control occupies the tab strip's lane independently of OS auto-hiding. */
.tabs-sticky .tabs-scrollbar{position:absolute;z-index:4;height:12px;padding:2px 4px;border:0;background:var(--selected-surface);box-shadow:none}
.tabs-scrollbar .table-scrollbar-thumb{height:8px;background:var(--text-subtle)}
/* Keep active colour attached to the actual tab while an overflowing strip scrolls. */
.first-tab-active .tabs-sticky.tabs-overflowing.is-stuck .tabs-nav,.last-tab-active .tabs-sticky.tabs-overflowing.is-stuck .tabs-nav{background:var(--surface)}
@media(max-width:850px){.tabs-nav{--tabs-current-item-width:var(--tabs-item-width-mobile,112px)}.tabs-nav :is(button,a[role="tab"]){flex-basis:var(--tabs-item-width-mobile,112px);width:var(--tabs-item-width-mobile,112px);height:44px;min-height:44px;padding:0 8px}.tabs-sticky.tabs-overflowing{width:calc(100% + 36px);max-width:none;margin-right:-18px;margin-left:-18px}.tabs-sticky.is-stuck::before{right:-18px;left:-18px}}
@media(max-width:620px){.tabs-sticky.tabs-overflowing{width:calc(100% + 28px);margin-right:-14px;margin-left:-14px}.tabs-sticky.is-stuck::before{right:-14px;left:-14px}}
/* Overflowing tab strips already reach the container edges; their backdrop must not widen the page. */
.tabs-sticky.tabs-overflowing::before{right:0;left:0}