/*
 * Ehopto Tabs · shared navigation language v1
 *
 * Opt-in utility: the public Hub and the My Hub editor use the same
 * lightweight, horizontally discoverable tab strip. Switching content is
 * delegated to the existing owning controller/JS, not this stylesheet.
 */
.e-tabs-shell {
    --e-tabs-accent: var(--hm-accent, var(--e-accent-soft, #2688ec));
    --e-tabs-ink: var(--hm-title, var(--e-ink, #162941));
    --e-tabs-muted: var(--hm-muted, var(--e-ink-muted, #63768b));
    --e-tabs-line: var(--hm-line, var(--e-line, #dce5ef));
    --e-tabs-tint: color-mix(in srgb, var(--e-tabs-accent) 9%, transparent);
    display:flex;
    align-items:stretch;
    gap:3px;
    width:100%;
    max-width:100%;
    min-width:0;
    border-bottom:1px solid var(--e-tabs-line);
    isolation:isolate;
}
.e-tabs-shell .e-tabs {
    flex:1 1 auto;
    display:flex !important;
    align-items:stretch;
    gap:3px !important;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0 !important;
    padding:0 2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:10px;
    scrollbar-width:none !important;
    -ms-overflow-style:none;
}
.e-tabs-shell .e-tabs::-webkit-scrollbar {
    width:0 !important;
    height:0 !important;
    display:none !important;
}
.e-tabs-shell .e-tabs > :is(a,button) {
    appearance:none;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:auto !important;
    min-width:0;
    max-width:none;
    min-height:41px !important;
    margin:0 !important;
    padding:10px 14px 9px !important;
    white-space:nowrap;
    text-align:center;
    font:inherit;
    font-size:12.5px !important;
    font-weight:640 !important;
    line-height:1.35;
    letter-spacing:0;
    color:var(--e-tabs-muted) !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:8px 8px 0 0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
    cursor:pointer;
    scroll-snap-align:center;
    transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.e-tabs-shell .e-tabs > :is(a,button):hover {
    background:var(--e-tabs-tint) !important;
    color:var(--e-tabs-ink) !important;
}
.e-tabs-shell .e-tabs > :is(a,button)[aria-current="page"],
.e-tabs-shell .e-tabs > :is(a,button)[aria-selected="true"] {
    font-weight:760 !important;
    background:var(--e-tabs-tint) !important;
    color:var(--e-tabs-ink) !important;
    border-bottom-color:var(--e-tabs-accent) !important;
}
.e-tabs-shell .e-tabs > :is(a,button):focus-visible,
.e-tabs-shell .e-tabs-step:focus-visible {
    outline:2px solid var(--e-tabs-accent) !important;
    outline-offset:-3px;
}
.e-tabs-shell .e-tabs-step {
    flex:0 0 28px;
    appearance:none;
    align-self:center;
    display:grid;
    place-items:center;
    width:28px;
    min-width:28px;
    height:33px;
    padding:0;
    margin:0;
    background:transparent;
    border:0;
    border-radius:8px;
    color:var(--e-tabs-ink);
    font:inherit;
    font-size:24px;
    font-weight:400;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.e-tabs-shell .e-tabs-step:hover {
    background:var(--e-tabs-tint);
}
.e-tabs-shell .e-tabs-step[hidden] {display:none !important;}
.e-tabs-shell.e-tabs-shell--public {
    position:sticky;
    top:0;
    z-index:50;
    padding-top:4px;
    background:var(--hm-bg, #fafbff);
}
.e-tabs-shell.e-tabs-shell--editor {
    margin:20px 0 17px;
}
.e-tabs-shell.e-tabs-shell--sub {
    margin:12px 0;
}
.e-tabs-shell.e-tabs-shell--sub .e-tabs > :is(a,button) {
    min-height:36px !important;
    padding:7px 12px !important;
    font-size:12px !important;
}
@media (max-width:620px) {
    .e-tabs-shell {gap:2px}
    .e-tabs-shell .e-tabs {gap:0 !important}
    .e-tabs-shell .e-tabs > :is(a,button) {
        min-height:43px !important;
        padding:10px 11px !important;
        font-size:12px !important;
    }
    .e-tabs-shell .e-tabs-step {
        flex-basis:26px;
        min-width:26px;
        width:26px;
        height:35px;
        font-size:23px;
    }
    .e-tabs-shell.e-tabs-shell--public {padding-top:0}
}
@media (prefers-reduced-motion:reduce) {
    .e-tabs-shell .e-tabs > :is(a,button) {transition:none}
}